脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue动态路由

vue3.0基于views批量实现动态路由的方法(示例代码)

 更新时间：2024年12月17日 11:19:41   作者：kirinlau  
以前vue项目中也有很多实现动态路由的方法,比如有一些项目涉及权限的可能会使用api请求路由数据在来createRouter,或者本地构建使用routes.push来动态构建路由, 今天介绍一种新的方式来基于某个文件夹批量构建动态路由的方法,感兴趣的朋友一起看看吧

以前vue项目中也有很多实现动态路由的方法，比如有一些项目涉及权限的可能会使用api请求路由数据在来createRouter，或者本地构建使用routes.push来动态构建路由， 今天介绍一种新的方式来基于某个文件夹批量构建动态路由的方法：
假如项目scr基础目录伪代码如下：

src
├── views
│   ├── Home.vue
│   ├── About.vue
│   └──...（其他组件.vue文件）
├── main.js
└── router
    └── index.js

配置router

src/router/index.js（路由配置文件，路径可根据实际情况调整）中进行如下基础配置：

import { createRouter, createWebHistory } from 'vue-router'
import.meta.glob('../views/*.vue') // 用于动态导入组件
const routes = []
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

动态生成路由

import { createRouter, createWebHistory } from 'vue-router'
import.meta.glob('../views/*.vue')
const routes = []
const addRoutesFromViewsFolder = () => {
  const componentModules = import.meta.glob('../views/*.vue')
  for (const path in componentModules) {
    const componentName = path.split('/').pop().replace('.vue', '')
    const routePath = `/${componentName.toLowerCase()}`
    const routeConfig = {
      path: routePath,
      name: componentName,
      component: componentModules[path],
      meta: {
        title: obj.componentName,
        needToken: obj.needToken
      }
    }
    routes.push(routeConfig)
  }
}
addRoutesFromViewsFolder()
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

在 main.js 中使用路由

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

总结：

  • 首先通过import.meta.glob(‘…/views/*.vue’)获取views文件夹下所有.vue组件的模块引用
  • 然后遍历这些模块引用，分割提取出组件名称，并根据一定规则生成路由配置对象，包含path(路由路径)、name(路由名称)以及component(对应的组件)
  • 接着将这些路由配置对象添加到routes数组中，并基于这个routes数组创建vue-router实例
  • 这样，Vue 3 应用就可以根据views文件夹下的组件动态生成路由了，当添加新的组件到views文件夹时，只要符合上述扫描规则，就会自动被添加到路由配置中，无需手动逐个去配置路由，也无须知道别人添加了什么路由

注意：

  • 代码中的路径等都是基于常见的项目结构示例，实际项目中你可能需要根据真实的文件夹结构和组件命名等情况来调整相关代码，比如import.meta.glob中的路径部分。
  • 另外菜单渲染遍历使用的是meta最好能写个映射表，这样就可以和当前的routes对象自动对应
  • 还有就是对于更复杂的路由需求，比如路由嵌套、路由参数传递等，还需要进一步在路由配置和组件中进行相应的扩展和实现。

备注：vue3中引入了import.meta.的概念可以有很多的用法比如环境变量、当前url、当前组件等

到此这篇关于vue3.0基于views批量实现动态路由的方法(示例代码)的文章就介绍到这了,更多相关vue动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论