使用的版本:

"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'),
    }]
    }

实现步骤:

  1. 请确认已正确引入Vue-Router4,并将需要引入的路由都按[name].vue的格式进行命名

  1. 在需要引入的目录( 我这里的目录名为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}
  1. 这是我这边配置的vite.config.js里的alias,如果已注册则无视

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
})
  1. 在router的js(router/index.js)文件下引入exampleRouter,修改为自己对应的目录

import {exampleRouter} from "@/example/index.js"
  1. 按需定义路由,如:

// 2. 定义一些路由
const routes = [
    {
        path: '/',
        component: home
    },
    {
        path: '/example',
        children:exampleRouter
    }
]
  1. exampleNameList的使用示例

  <router-link  v-for="(item,index) in exampleNameList" :key="index" :to="{name:item.name}">
    <div>{{ item.title }}</div>
  </router-link>

点击可跳转对应路由

Logo

前往低代码交流专区

更多推荐