const routes = [
{
path: '/',
name: 'layout',
redirect: { name: 'index' },
component: 'layout',
children: [
{
component: 'index'
}
]
},
{
component: 'login'
},
{
path: '*',
redirect: { name: 'index' }
}
]
// 获取路由信息的方法
const getRouters = function () {
createRoute(routes)
return routes
}
// 自动生成路由
function createRoute (arr) {
for (let i = 0; i < arr.length; i++) {
if (!arr[i].component) return
// 去除index
const val = delIndex(arr[i].component)
// 生成name,如果用户设置了就不用自动生成
arr[i].name = arr[i].name || val.replace(/\//g, '_')
// 生成path,如果用户设置了就不用自动生成,而是使用用户设置的
arr[i].path = arr[i].path || `/${val}`
// 自动生成component
arr[i].component = require(`../../views/${arr[i].component}.vue`).default
if (arr[i].children && arr[i].children.length > 0) {
createRoute(arr[i].children)
}
}
}
// 去除最后的index
function delIndex (str) {
// 获取最后一个/后面的值
const index = str.lastIndexOf('/')
// 获取最后一个/后面的值
const val = str.substring(index + 1, str.length)
// 判断是不是index结尾
if (val === 'index') {
return str.substring(index, -1)
}
return str
}
export default getRouters()
vue路由封装 - 自动生成路由
最新推荐文章于 2024-08-20 09:15:34 发布