vue小技巧———动态路由引入

mac2024-04-08  41

有时候项目比较大的时候,路由太多,放在一起不便于维护,这时候我们可以分模块引入路由,比如在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
最新回复(0)