VUE实现路由自动生成,使用require.context根据views文件夹下(多级文件夹)所有.vue文件路径实现路由自动匹配生成, Login.vue和Home.vue固定在views下作为一级路由,其他和Login.vue同一目录下的vue文件也是一级路由, 其他文件夹下的vue文件以index.vue作为出口, 且文件夹下的index.vue的均在home.vue的children下, 其他文件夹下的除index.vue文件的路由均在index.vue的children下
时间: 2024-03-15 18:43:54 浏览: 143
这是一个非常不错的自动化路由生成的方法,使用 `require.context` 可以快速地遍历 views 文件夹下的所有 .vue 文件。下面是一个示例代码:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 生成路由配置
function generateRoutes(routeContext) {
const routes = []
// 遍历所有 .vue 文件
routeContext.keys().forEach(key => {
// 获取文件相对路径,如 './User.vue'
const routePath = key.replace(/^\.\/(.*)\.\w+$/, '$1')
// 根据文件路径生成路由配置
const routeConfig = {
path: `/${routePath}`,
name: routePath,
component: () => import(`@/views/${routePath}.vue`)
}
// 判断是否是一级路由
if (routePath === 'Login' || routePath === 'Home') {
routes.push(routeConfig)
} else {
const [parentPath, childPath] = routePath.split('/')
let parentRoute = routes.find(route => route.path === `/${parentPath}`)
if (!parentRoute) {
parentRoute = {
path: `/${parentPath}`,
component: () => import(`@/views/${parentPath}/index.vue`),
children: []
}
routes.push(parentRoute)
}
parentRoute.children.push(routeConfig)
}
})
return routes
}
// 使用 require.context 生成路由配置
const routeContext = require.context('@/views', true, /\.vue$/)
const routes = generateRoutes(routeContext)
// 创建路由实例
const router = new Router({
mode: 'history',
routes
})
export default router
```
在上面的代码中,我们首先定义了 `generateRoutes` 函数,它接受一个 `require.context` 对象作为参数,遍历所有 .vue 文件,根据文件路径生成路由配置。根据要求,Login.vue 和 Home.vue 固定在 views 下作为一级路由,其他和 Login.vue 同一目录下的 vue 文件也是一级路由,其他文件夹下的 vue 文件以 index.vue 作为出口,且文件夹下的 index.vue 均在 Home.vue 的 children 下,其他文件夹下的除 index.vue 文件的路由均在 index.vue 的 children 下。
然后,我们使用 `require.context` 生成路由配置,并调用 `generateRoutes` 函数生成路由配置数组。最后,我们使用 `new Router` 创建路由实例,并将路由配置数组作为参数传入。
阅读全文