vue項(xiàng)目中addRoutes出現(xiàn)添加路由重復(fù)如何解決

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹vue項(xiàng)目中addRoutes出現(xiàn)添加路由重復(fù)如何解決，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const createRouter = () => new Router({
 mode: 'history',
 routes: []
})

const router = createRouter()

export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher // the relevant part
}

export default router

找老外的文檔解決的問題，在登出的模塊調(diào)用resetRouter方法，把原來的路由替換。

補(bǔ)充知識(shí)：vue中 做權(quán)限管理 使用router.addRoutes()動(dòng)態(tài)添加路由以及解決刷新失效，跳轉(zhuǎn)后刷新失效問題

最近在公司做知識(shí)儲(chǔ)備，有個(gè)權(quán)限的問題干擾了我2天，今天終于把他理順了?。?！

一、需求明確

我想做的是后臺(tái)管理系統(tǒng)的權(quán)限管理，（所有的數(shù)據(jù)都是使用mockJs模擬得來），登錄的時(shí)候，發(fā)送表單驗(yàn)證，驗(yàn)證成功后，后臺(tái)返回權(quán)限列表，權(quán)限不同，返回的列表不同，拿到權(quán)限列表后，把權(quán)限列表渲染出來在頁(yè)面?zhèn)冗厵谏稀?/p>

二、注意點(diǎn)

（1） 前端提前設(shè)置靜態(tài)的權(quán)限列表，通常只包括頁(yè)面公共的部分，比如 login。

（2）前端提前定義所有的權(quán)限列表，將其定義為一個(gè)數(shù)組，該數(shù)組中包含所有的權(quán)限。

（3）后臺(tái)返回的數(shù)據(jù)是該用戶擁有的所有權(quán)限列表，一般寫成路由形式，但只包含name即可，如：

{
  "code": 0,
  "message": "獲取權(quán)限成功",
  "data": [
    {
      "name": "訂單管理",
      "children": [
        {
          "name": "訂單列表"
        },
        {
          "name": "生產(chǎn)管理",
          "children": [
            {
              "name": "生產(chǎn)列表"
            }           
          ]
        },
        {
          "name": "退貨管理"
        }
      ]
    }
  ]
}

三、思路與實(shí)現(xiàn)

（1）當(dāng)用戶點(diǎn)擊登錄的時(shí)候，驗(yàn)證成功后，可以獲取當(dāng)前用戶的id（token）存儲(chǔ)到sessionStorage中。

（2）根據(jù) '后臺(tái)返回的權(quán)限列表（getList）'，去比對(duì) '我們提前定義好的權(quán)限列表（powerList）'，然后得出 '應(yīng)該動(dòng)態(tài)添加的權(quán)限列表（list）' ，并存放到vuex中，最后執(zhí)行addRoutes把比對(duì)出來的權(quán)限路由列表動(dòng)態(tài)添加到路由中即可。

（3）進(jìn)入home頁(yè)面，渲染側(cè)邊欄。

四、問題

（1）vuex中數(shù)據(jù)存儲(chǔ)在內(nèi)存中，刷新后失效需要重新獲取。因此會(huì)出現(xiàn)動(dòng)態(tài)頁(yè)面失效問題。我們需要根據(jù)是否為刷新頁(yè)面來重新加載即可。

（2）進(jìn)入動(dòng)態(tài)加載的頁(yè)面，然后再刷新，也會(huì)出現(xiàn)上面的情況

五、解決方法

在router的全局導(dǎo)航守衛(wèi)beforeEach中設(shè)置，根據(jù)vuex中是否有l(wèi)ist 來判斷是否為刷新頁(yè)面，如果有那么是第一次登陸， 如果沒有，那么就為刷新頁(yè)面，需要重新執(zhí)行即可。

getRoutes就是執(zhí)行路由對(duì)比，然后執(zhí)行addRoutes的函數(shù)，因?yàn)槠渲杏蝎@取后臺(tái)的路由列表這一步，為異步操作，所以應(yīng)該放在action中

關(guān)于vue項(xiàng)目中addRoutes出現(xiàn)添加路由重復(fù)如何解決就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。