zoukankan      html  css  js  c++  java
  • vue-router路由加载两种模式

    npm

    npm install --save vue-router

    安装完成后,打开package.json,如果看到这个"vue-router": 版本号,
    就代表安装成功了
      "dependencies": {
        "axios": "^0.18.0",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1"
      },
    

    路由加载分为两种模式

    懒加载

    在我们进入首屏页面的时候根据需要加载路由组件,从而优化用户体验

    import Vue from 'vue'
    import Router from 'vue-router'
     
    Vue.use(Router)
     
    export default new Router({
      mode: 'history',
      base: '/flag2019/admin',
      routes: [
        {
          path: '/',
          redirect: '/flag'
        },
        {
          path: '/flag',
          component: resolve => require(['../components/flag.vue'], resolve),
          meta: {title: 'xxxxx'},
        },
        {
          path: '/flagAdvise',
          component: resolve => require(['../components/flagAdvise.vue'], resolve),
          meta: {title: 'xxxx'},
        },
      ]
    })
    

    正常加载

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/pages/Home'
    import CustomerService from '@/pages/CustomerService'
     
    Vue.use(Router)
     
    export default new Router({
        mode: 'history',
        base: '/dreforeshop/mobile',
        routes: [
            {
                path: '/home',
                name: 'home',
                component: Home,
                meta: {
                    keepAlive: false
                }
            },
            {
                path: '/service',
                name: 'service',
                component: CustomerService,
                meta: {
                    keepAlive: false
                }
            },
        ]
    })
    

    tip:加 mode: 'history',是为了去掉url中的#号

  • 相关阅读:
    【371】Twitter 分类相关
    【370】Python列表生成式(for 写入一行)
    Netbeans 中的编译器相关配置
    SP*
    du 命令
    闲杂
    Shell重定向&>file、2>&1、1>&2的区别
    Shell编程中Shift的用法
    shell中一维数组值得获取
    shell expr的用法
  • 原文地址:https://www.cnblogs.com/zouwangblog/p/11141246.html
Copyright © 2011-2022 走看看