最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時(shí)間:2023年02月16日 11:56:26   作者:夏燦y  
ue動(dòng)態(tài)路由(約定路由),聽起來(lái)好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒(méi)有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下

前言

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

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

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

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

//map-menu.js 
//動(dòng)態(tài)添加路由
const modules = import.meta.glob('../views/*/*.vue')    //vite中獲取組件文件的方法
export function mapMenu(navList) {		//navList 傳入后臺(tái)接口返回的路由列表
  //最終動(dòng)態(tài)添加路由返回?cá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過(guò)來(lái)的數(shù)據(jù)不同,所以你需要根據(jù)情況將path,name,component這三個(gè)獲取出來(lái)并最終轉(zhuǎn)換成你需要的。

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

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

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

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

三,最終完成動(dòng)態(tài)添加路由

前面我們說(shuō)過(guò)了,我們動(dòng)態(tài)添加路由的時(shí)機(jī)就是二個(gè),初始化和登錄時(shí)候,所以我們現(xiàn)在就完成最后的部分。

// vuex中的user.js模塊
//動(dòng)態(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)
        //本地存儲(chǔ)
        cache.setCache('jxcms-user', loginRes)
        dispatch('requestUserNav')	//執(zhí)行動(dòng)態(tài)生成路由
       	router.push('/roles')
        cache.setCache('jxcms-token', loginRes.token)
      } else {
        ElMessage({
          message: '登錄失敗',
          type: 'error'
        })
      }
    }
}

這里我們完成第一個(gè)動(dòng)態(tài)添加路由的時(shí)機(jī),登錄成功時(shí)候,進(jìn)行動(dòng)態(tài)路由添加。

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

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

總結(jié) 

到此這篇關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)路由添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue中this.$nextTick的作用及用法

    Vue中this.$nextTick的作用及用法

    在本文章里小編給大家整理了關(guān)于Vue中this.$nextTick的作用及用法,有需要的朋友們可以跟著學(xué)習(xí)參考下。
    2020-02-02
  • Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解

    Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解

    watch是一個(gè)偵聽器,默認(rèn)是懶偵聽的,即僅在偵聽源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù),watchEffect是會(huì)自動(dòng)收集函數(shù)里面變量的響應(yīng)式依賴,本文主要來(lái)講講二者的區(qū)別,感興趣的可以了解一下
    2023-07-07
  • Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法

    Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法

    項(xiàng)目中需要用到大量的數(shù)字輸入框限制,為了可以以后能又更多的拓展性,下面這篇文章主要給大家介紹了關(guān)于Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-08-08
  • Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)

    Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Vue3 + TypeScript 開發(fā)總結(jié)

    Vue3 + TypeScript 開發(fā)總結(jié)

    本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容,感興趣的話一起來(lái)看看吧
    2021-08-08
  • 詳解如何在vue中使用sass

    詳解如何在vue中使用sass

    本篇文章主要介紹了詳解如何在vue中使用sass,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • vue完美實(shí)現(xiàn)el-table列寬自適應(yīng)

    vue完美實(shí)現(xiàn)el-table列寬自適應(yīng)

    這篇文章主要介紹了vue完美實(shí)現(xiàn)el-table列寬自適應(yīng),對(duì)vue感興趣的同學(xué),可以參考下
    2021-05-05
  • vue中的路由攔截器的作用詳解

    vue中的路由攔截器的作用詳解

    在Vue中,路由攔截器主要用于在導(dǎo)航到某個(gè)路由前或者離開某個(gè)路由時(shí)進(jìn)行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧
    2024-07-07
  • vue中使用typescript配置步驟

    vue中使用typescript配置步驟

    本文主要介紹了vue中使用typescript配置,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能

    vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能

    這篇文章主要介紹了vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-12-12

最新評(píng)論

海阳市| 友谊县| 徐汇区| 林西县| 栾川县| 丹巴县| 尼玛县| 茶陵县| 册亨县| 襄垣县| 扎赉特旗| 祁门县| 东源县| 永寿县| 桃园县| 科尔| 鄂温| 当雄县| 岑巩县| 中山市| 睢宁县| 岢岚县| 乌什县| 兴文县| 城口县| 红安县| 宁津县| 阜城县| 香格里拉县| 鲁山县| 康马县| 太谷县| 色达县| 定结县| 鲜城| 眉山市| 建阳市| 临洮县| 浠水县| 勐海县| 苏尼特左旗|