【vue3+vite+vue-router】动态引入某个目录下的文件自动生成路由
使用vite提供的import.meta.glob,对指定目录下的文件都可以自动引入作为子路由进行注册,文件名直接作为path和name(注意name不能重复,如果重复的话可以在前面或者后面添加一个字符串作为标识),免去了复杂繁琐的引入步骤。
·
使用的版本:
"dependencies": {
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.1.0"
}
实现效果:
使用vite提供的import.meta.glob,对指定目录下的文件都可以自动引入作为子路由进行注册,文件名直接作为path和name(注意name不能重复,如果重复的话可以在前面或者后面添加一个字符串作为标识),免去了复杂繁琐的引入步骤。
如:
可自动转换为
{
path: '/example',
children:[{
name:'example-horse',
path: 'horse',
component: () => import('@/example/horse.vue'),
},{
name:'example-vr-house',
path: 'vr-house',
component: () => import('@/example/vr-house.vue'),
}]
}
实现步骤:
请确认已正确引入Vue-Router4,并将需要引入的路由都按[name].vue的格式进行命名
在需要引入的目录( 我这里的目录名为example,以下直接以example替代)下新建一个index.js文件(如有冲突可自行命名)
// index.js
// 根据目录动态生成路由 目录下文件格式 /[name].vue
// 1.引入模块
const exampleList = import.meta.glob('./*.vue', {import: 'default', eager: true})
// 2.路由数组作为Children使用
const exampleRouter = [];
const exampleNameList = [];
// 中文标题配置
const titleConfig={
'horse':'小马',
'vr-house':'VR看房'
}
Object.keys(exampleList).forEach(key => {
// 路由名称
const name = exampleList[key].name;
// 路由属性
const obj = {
name:'example'+name,
path: name,
component: exampleList[key]
}
// 3.生成路由数组,用于生成路由
exampleRouter.push(obj)、
// 4.生成名称数组, 按需使用,可用于自动渲染跳转按钮列表
exampleNameList.push({title:titleConfig[name]||name,name})
});
// 5.导出模块
export {exampleRouter,exampleNameList}
这是我这边配置的vite.config.js里的alias,如果已注册则无视
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": "/src",
},
},
})
在router的js(router/index.js)文件下引入exampleRouter,修改为自己对应的目录
import {exampleRouter} from "@/example/index.js"
按需定义路由,如:
// 2. 定义一些路由
const routes = [
{
path: '/',
component: home
},
{
path: '/example',
children:exampleRouter
}
]
exampleNameList的使用示例
<router-link v-for="(item,index) in exampleNameList" :key="index" :to="{name:item.name}">
<div>{{ item.title }}</div>
</router-link>
点击可跳转对应路由
更多推荐
已为社区贡献1条内容
所有评论(0)