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中的#号