vue构建大型项目之路由拆分与按需加载

1.路由拆分

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import schoolRoutes from './indexSchool'
import proRoutes from './indexPro'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/heightIndex'
    },
    ...schoolRoutes,//es6数组扩展符
    ...proRoutes
  ],
  linkActiveClass: 'active'
})

export default router

src/main.js

import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

src/router/indexSchool.js

export default
  [
    {
      path: '/schoolIndex',
      component: resolve => require(['@/components/schoolIndexPage'], resolve),
      redirect: '/schoolIndex/schoolPro',
      children: [
        {
          path: 'schoolPro',
          component: resolve => require(['@/schoolPages/schoolPro.vue'], resolve),
          redirect: '/schoolIndex/schoolPro/schoolProIndex',
          children: [
            {
              path: 'schoolProIndex',
              component: resolve => require(['@/schoolPages/schoolPro/schoolProIndex'], resolve)
            },
            {
              path: 'teachProIndex',
              component: resolve => require(['@/schoolPages/schoolPro/teachProIndex'], resolve)
            }
          ]
        }
      ]
    }
  ]

2.按需加载（懒加载）

    {
      path:'/axiosMock',
      component:resolve => require(['@/components/popup/axiosMock'],resolve)
    }