快捷導(dǎo)航

vue 解決addRoutes多次添加路由重復(fù)的操作

更新時(shí)間：2020年08月04日 14:38:14 作者：極速代碼

這篇文章主要介紹了vue 解決addRoutes多次添加路由重復(fù)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

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

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

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

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

一、需求明確

我想做的是后臺(tái)管理系統(tǒng)的權(quán)限管理，（所有的數(shù)據(jù)都是使用mockJs模擬得來(lái)），登錄的時(shí)候，發(fā)送表單驗(yàn)證，驗(yàn)證成功后，后臺(tái)返回權(quán)限列表，權(quán)限不同，返回的列表不同，拿到權(quán)限列表后，把權(quán)限列表渲染出來(lái)在頁(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ì)出來(lái)的權(quán)限路由列表動(dòng)態(tài)添加到路由中即可。

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

四、問(wèn)題

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

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

五、解決方法

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