vue實(shí)現(xiàn)動態(tài)路由添加功能的簡單方法(無廢話版本)

更新時間：2023年02月16日 11:56:26 作者：夏燦y

ue動態(tài)路由(約定路由),聽起來好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會發(fā)現(xiàn)沒有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動態(tài)路由添加功能的簡單方法,需要的朋友可以參考下

前言

最近練習(xí)vue的項(xiàng)目，有關(guān)于后臺管理系統(tǒng)的動態(tài)添加路由部分,根據(jù)思路實(shí)現(xiàn)了基本的功能，在這里記錄一下，等后面學(xué)習(xí)后在進(jìn)行優(yōu)化。

這里只是記錄我個人最后實(shí)現(xiàn)的思路，本人由于是初學(xué)者，可能思路和代碼有不正確地方，還求多見諒。也請能不吝賜教，一同進(jìn)步。

一 . 封裝一個處理生產(chǎn)路由的函數(shù)

我們可以封裝一個函數(shù)，這個函數(shù)專門用來幫助我們生產(chǎn)最后添加到路由中的路由對象。

//map-menu.js 
//動態(tài)添加路由
const modules = import.meta.glob('../views/*/*.vue')    //vite中獲取組件文件的方法
export function mapMenu(navList) {		//navList 傳入后臺接口返回的路由列表
  //最終動態(tài)添加路由返回數(shù)組
  const routerList = []
  for (const key of navList) {
    routerList.push({
      path: `/${key.nUrl.split('/')[2]}`,
      name: `${key.nUrl.split('/')[2].toUpperCase()}`,
      component: modules[`..${key.nUrl}`]
    })
  }
  return routerList
}

注意：這里需要大家自己根據(jù)自己需要的情況進(jìn)行處理，因?yàn)楹蠖私涌趥鬟f過來的數(shù)據(jù)不同，所以你需要根據(jù)情況將path,name,component這三個獲取出來并最終轉(zhuǎn)換成你需要的。

二. vuex中進(jìn)行調(diào)用

我們封裝好了一個函數(shù)，接下來我們就需要調(diào)用來幫助我們動態(tài)生產(chǎn)路由，但是有一個問題來了，我們需要何時來進(jìn)行動態(tài)生成路由。
這里我個人理解是：1.在用戶進(jìn)行登錄后進(jìn)行動態(tài)生產(chǎn)路由，將用戶的菜單生成出來，并保存起來。 2. 就是在頁面刷新時候我們也需要動態(tài)生成路由，因?yàn)樗⑿马撁媛酚蓵⑿?，不再次進(jìn)行動態(tài)生成就是丟失，這里我們可以和對vuex初始化一起進(jìn)行。

// vuex中的user.js模塊
//動態(tài)添加路由
import { mapMenu } from '@/util/map-menu.js'   //前面封裝的函數(shù)
  state: {
    userNav: []
  },
  mutations: {
    changeUserNav(state, userNav) {
      state.userNav = userNav
      //動態(tài)添加路由
      mapMenu(userNav).forEach((route) => {
        router.addRoute(route)		//動態(tài)添加路由
      })
    }
  },
  actions: {
    async requestUserNav({ commit }) {
      const navList = await getRolesNavRequest()
      commit('changeUserNav', navList)
      cache.setCache('jxcms-userNav', navList)
    }
}

這樣我們就定義好了，只需要調(diào)用store.dispatch('requestUserNav') 就可以動態(tài)生成路由。另外，因?yàn)?code>vue-router4.0中將 router.addRoutes方法廢除了，所以我們只能使用 router.addRoute 循環(huán)添加所有的路由。

三，最終完成動態(tài)添加路由

前面我們說過了，我們動態(tài)添加路由的時機(jī)就是二個，初始化和登錄時候，所以我們現(xiàn)在就完成最后的部分。

// vuex中的user.js模塊
//動態(tài)添加路由
import { mapMenu } from '@/util/map-menu.js'   //前面封裝的函數(shù)
  state: {
  ...
  },
  mutations: {
  ...
  },
  actions: {
    async loginUser({ dispatch, commit }, info) {
      const loginRes = await loginUser(info)
      if (loginRes.uName) {
        if (!cache.getCache('jxcms-token')) {
          ElMessage({
            message: '登錄成功!',
            type: 'success'
          })
        }
        commit('changeUser', loginRes)
        //本地存儲
        cache.setCache('jxcms-user', loginRes)
        dispatch('requestUserNav')	//執(zhí)行動態(tài)生成路由
       	router.push('/roles')
        cache.setCache('jxcms-token', loginRes.token)
      } else {
        ElMessage({
          message: '登錄失敗',
          type: 'error'
        })
      }
    }
}

這里我們完成第一個動態(tài)添加路由的時機(jī)，登錄成功時候，進(jìn)行動態(tài)路由添加。

// vuex中的根模塊 index.js
  actions: {
    initializationData({ dispatch, commit }) {	//vuex初始化函數(shù)
      const navList = cache.getCache('jxcms-userNav')
      commit('changeUserNav', navList)	//動態(tài)生成路由
      //要用同步的
      const user = cache.getCache('jxcms-user')
      commit('changeUser', user)
    }
  },
  modules: {
    user,
    nav,
    dept,
    roles
  }

// main.js
//初始化
store.dispatch('initializationData')

這里我們完成了動態(tài)生成路由的第二個時機(jī)：刷新頁面時，初始化時候進(jìn)行動態(tài)路由生成. 因?yàn)樗⑿马撁鏁r候用戶可能是登錄狀態(tài)，這樣我們就不能通過登錄成功來觸發(fā)動態(tài)路由添加，就需要我們主動進(jìn)行動態(tài)路由生成，在初始化時候，獲取到本地存儲的菜單信息，如果用戶沒有登錄，本地的菜單信息會被清除。
另外，這里我使用的是commit來提交mutations,而不是actions函數(shù)，這是因?yàn)槲以跍y試過程中發(fā)現(xiàn)，如果我使用actions，那么我在進(jìn)入路由頁面前，路由并沒有創(chuàng)建成功，會報錯，而使用mutations，因?yàn)槭峭降?，所以不會出現(xiàn)這個情況。這個問題后面如果找到解決辦法，會重新進(jìn)行修改。