快捷導(dǎo)航

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

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

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

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

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ǔ)充知識：vue中做權(quán)限管理使用router.addRoutes()動態(tài)添加路由以及解決刷新失效，跳轉(zhuǎn)后刷新失效問題

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

一、需求明確

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

二、注意點(diǎn)

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

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

（3）后臺返回的數(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）存儲到sessionStorage中。

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

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

四、問題

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

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

五、解決方法

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