Vue Router 路由拆分

1，子路由拆分

子路由map.js

const map = [
 {
   path: '/map-mutations',
   name: 'map-mutations',
   component: () => import('@/components/map-mutations')
 },
  {
    path: '/map-getters',
    name: 'map-getters',
    component: () => import('@/components/map-getters')
  },
  {
    path: '/map-actions',
    name: 'map-actions',
    component: () => import('@/components/map-actions')
  }]

export default map;

主路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import map from  './map'  //子路由
import error from './error' //模块路由

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: map
    },
    ...error
  ]
})

2，模块路由拆分

模块路由 error.js

const error = [
 {
   path: '/error',
   name: 'error',
   component: () => import('@/components/404')
 }, 
 {
   path: '*',
   name: 'err404',
   component: () => import('@/components/404')
}]

export default error;

主路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import map from  './map'  //子路由
import error from './error' //模块路由

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: map
    },
    ...error
  ]
})