routers.forEach(item => {
const paths = item.match(/[a-zA-Z]+/g) //paths中存储了一个目录，二级目录，文件名
const routerChild = { //定义路由对象
path: paths[1],
name: `${paths[0]}${_.upperFirst(paths[1])}`, //upperFirst,lodash 首字母大写方法
component(resolve) {
require([`../../views${item.slice(1)}`], resolve)
},
}
if (/index.vue$/.test(item)) { //判断是否以index。vue结尾
if (indexRouterMap[paths[0]]) { //判断一级路由是否存在，存在push二级路由，不存在则新建
indexRouterMap[paths[0]].children.push(routerChild)
} else {
indexRouterMap[paths[0]] = {
path: '/' + paths[0],
component: Layout,
children: [routerChild] }
}
} else { //不以index.vue结尾的，直接添加到路由中
detailRouterArr.push({
path: item.slice(1, -4), //渠道最前面的 . 和最后的.vue
name: `${paths[0]}${_.upperFirst(paths[1])}${_.upperFirst(paths[2])}`,
component(resolve) {
require([`../../views${item.slice(1)}`], resolve)
},
meta: {
noCache: true, //不keepAlive
noVerify: true //不做权限验证
}
})
}
})
export default [
...Object.values(indexRouterMap),
...detailRouterArr,
/**
* dashboard单独处理下
*/
{
path: '',
component: Layout,
redirect: 'dashboard',
children: [
{
path: 'dashboard',
component: () => import('VIEWS/dashboard/index'),
name: 'dashboard',
meta: { title: '首页', noCache: true, noVerify: true }
}
] },
]
简简单单的几十行代码就实现了所有的路由功能，再也不用一行一行的写路由文件了。可能你的文件管理方式和我的不一样，但是只要稍微改改正则就行了。
4. 注意
不能用import引入路由，因为用import引入不支持变量
不能用别名，找了半天问题，才知道用变量时也不能用别名，所以我用的都是相对路径
5.好处
不用在添加路由了，这个就不说了，明眼人都看得出来
知道了路由，一个能找到对应的文件，以前我们团队就出现过，乱写path的情况
更好的控制验证和keepAlive
总结
以上所述是小编给大家介绍的vue 自动化路由实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
