本方法可以根据文件名,动态生成一级路由和二级路由,彻底解决手动配置路由的烦恼
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
let oneRouter = []
// 动态导入并生成路由
const requireComponent = require.context('@/views', true, /\/[^\/]+\/index\.vue$/)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = fileName.split('/') // 获取文件夹名
let routename
// 生成的一级路由挂载到全局去使用
if(componentName.length<=3){
routename = componentName[1]
oneRouter.push(componentName[1])
}else{
routename = componentName.slice(1, -1).join('/');
}
const route = {
path: `/${routename}`,
name: routename,
component: componentConfig.default || componentConfig
}
routes.push(route)
})
Vue.prototype.oneRouter = oneRouter
const router = new VueRouter({
routes
})
export default router
代码仅供参考,欢迎指出错误