利用requier.context()自动构建路由

qianduan1020

于 2019-10-23 10:09:09 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：自动构建路由 vue-router

本文链接：https://blog.youkuaiyun.com/qianduan1020/article/details/102696095

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种Vue项目中实现路由模块化配置的方法，通过使用require.context和importAll函数动态加载路由，使得路由配置更加灵活和易于维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
router文件的index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
// import About from './about.routes.js';
// import Home from './home.routes.js';
Vue.use(VueRouter)

const routesList=[]
function importAll(r){
  r.keys().forEach((route)=>{
    routesList.push(r(route).default)
  })
}
importAll( require.context('.',false,/routes\.js$/) )

export default new VueRouter({
  mode:'history',
  routes:[
    // Home,
    // About
    ...routesList
  ]
})

about.routes.js代码：

export default {
  path: '/about',
  name: 'about',
  component: () => import('../pages/about.vue')
}