以前vue項(xiàng)目中也有很多實(shí)現(xiàn)動(dòng)態(tài)路由的方法，比如有一些項(xiàng)目涉及權(quán)限的可能會(huì)使用api請(qǐng)求路由數(shù)據(jù)在來(lái)createRouter，或者本地構(gòu)建使用routes.push來(lái)動(dòng)態(tài)構(gòu)建路由， 今天介紹一種新的方式來(lái)基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法：
假如項(xiàng)目scr基礎(chǔ)目錄偽代碼如下：

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

配置router

src/router/index.js（路由配置文件，路徑可根據(jù)實(shí)際情況調(diào)整）中進(jìn)行如下基礎(chǔ)配置：

import { createRouter, createWebHistory } from 'vue-router'
import.meta.glob('../views/*.vue') // 用于動(dòng)態(tài)導(dǎo)入組件
const routes = []
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

動(dòng)態(tài)生成路由

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');

總結(jié)：

• 首先通過(guò)import.meta.glob(‘…/views/*.vue’)獲取views文件夾下所有.vue組件的模塊引用
• 然后遍歷這些模塊引用，分割提取出組件名稱，并根據(jù)一定規(guī)則生成路由配置對(duì)象，包含path(路由路徑)、name(路由名稱)以及component(對(duì)應(yīng)的組件)
• 接著將這些路由配置對(duì)象添加到routes數(shù)組中，并基于這個(gè)routes數(shù)組創(chuàng)建vue-router實(shí)例
• 這樣，Vue 3 應(yīng)用就可以根據(jù)views文件夾下的組件動(dòng)態(tài)生成路由了，當(dāng)添加新的組件到views文件夾時(shí)，只要符合上述掃描規(guī)則，就會(huì)自動(dòng)被添加到路由配置中，無(wú)需手動(dòng)逐個(gè)去配置路由，也無(wú)須知道別人添加了什么路由

注意：

• 代碼中的路徑等都是基于常見(jiàn)的項(xiàng)目結(jié)構(gòu)示例，實(shí)際項(xiàng)目中你可能需要根據(jù)真實(shí)的文件夾結(jié)構(gòu)和組件命名等情況來(lái)調(diào)整相關(guān)代碼，比如import.meta.glob中的路徑部分。
• 另外菜單渲染遍歷使用的是meta最好能寫(xiě)個(gè)映射表，這樣就可以和當(dāng)前的routes對(duì)象自動(dòng)對(duì)應(yīng)
• 還有就是對(duì)于更復(fù)雜的路由需求，比如路由嵌套、路由參數(shù)傳遞等，還需要進(jìn)一步在路由配置和組件中進(jìn)行相應(yīng)的擴(kuò)展和實(shí)現(xiàn)。

備注：vue3中引入了import.meta.的概念可以有很多的用法比如環(huán)境變量、當(dāng)前url、當(dāng)前組件等

到此這篇關(guān)于vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論