有時候項目比較大的時候,路由太多,放在一起不便於維護,這時候我們可以分模塊引入路由,比如在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