背景:项目非常大的时候路由非常多,路由模块化就易于阅读以及管理
1、目录结构
2、在main.js中注入router
import router from "./router";//引入路由出口文件
new Vue({
router,//挂载路由实例
store,
render: h => h(App)
}).$mount("#app");
3、router/index.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
let routes = [];
const routerContext = require.context('./', true, /index\.js$/);
routerContext.keys().forEach(route => {
if (route.startsWith('./index')) return;
const routerModule = routerContext(route);
routes = routes.concat(routerModule.default || routerModule)
});
const router = new Router({
mode: 'hash',
base: './',
routes: routes,
});
export default router;
4、模块路由js:
export default [{
path: "*",
redirect: '/'
},
{
path: '/',
name: 'index',
component: () => import('@/views/index.vue')
},
{
path: '/applicationProgress',
name: 'applicationProgress',
component: () => import('@/views/applicationProgress/index.vue')
},
]