有时候项目比较大的时候,路由太多,放在一起不便于维护,这时候我们可以分模块引入路由,比如在router目录下新建 login.routes.js
然后我们在主路由 index.js里面动态引入即可
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home'
Vue.use(VueRouter)
const routerList = []
function importAll(r) {
r.keys().forEach(
(key) => routerList.push(r(key).default),
)
}
importAll(require.context('.', true, /\.routes\.js/)) //寻找同级目录下以 routes.js 结尾的文件
const routes = [
...routerList, //动态引入路由列表
{
path: '/',
name: 'home',
component: Home,
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
export default router