臺路由需求

根據(jù)用戶權(quán)限獲取菜單（也就是路由信息），動態(tài)加載到路由當中，實現(xiàn)正常路由切換。

1、最開始的實現(xiàn)方式

用戶登錄—>接口獲取當前用戶的菜單信息—>格式化菜單信息（格式化成，路由格式）—>使用router.addRoutes動態(tài)加入路由。

實現(xiàn)結(jié)果：

路由添加成功，并且能正常的跳轉(zhuǎn)。但是，當我刷新頁面后頁面路由出錯了，直接進入了錯誤頁面404。

問題原因：

vue在初始化的時候，vue-router的實例對象已經(jīng)生成了，當前路由只包含了如登錄頁和404等靜態(tài)頁面，用戶權(quán)限獲取的路由需要在登錄成功后單獨請求權(quán)限接口再動態(tài)添加到路由當中，所以頁面在刷新的時候頁面會找不到對應動態(tài)的路由。

2、當前的問題在于刷新后

vue和vue-router重新初始化會跳過權(quán)限接口的請求和添加動態(tài)路由。

本人也卡在這個地方一下午，后面看了網(wǎng)上的處理方式和代碼，也整理了一份適應自己項目的處理方式。

最終的思路

在路由的導航守衛(wèi)router.beforeEach中判斷當前是頁面刷新還是路由切換，利用vuex的狀態(tài)值在頁面刷新就會重新初始化的特新和本地緩存localStorage存的登錄狀態(tài)值來判斷頁面刷新還是路由切換。

整體的實現(xiàn)方式如下:

最終的實現(xiàn)方式

注意點：我在vuex中緩存了用戶權(quán)限的接口返回的數(shù)據(jù)，可以根據(jù)需要存放在本地還是vuex都是可以的

1、用戶登錄—> 本地緩存用戶token和id

vuex中存入登錄用戶id（存的具體那個值,對還是錯都不重要，值只是用來判斷頁面刷新還是路由切換，隨意存。。只是用于后續(xù)的判斷） —>接口獲取當前用戶的菜單信息—>格式化菜單信息（格式化成，路由格式）—>使用router.addRoutes動態(tài)加入路由。

2、在導航守衛(wèi)router.beforeEach的方法中

進入路由后，判斷

• 1、本地緩存的token是否有值，沒有的話，說明用戶沒有登錄過，直接跳轉(zhuǎn)登錄頁面
• 2、token值有的，vuex中的用戶id存在的話，頁面只是路由切換，用next讓路由正常流轉(zhuǎn)下去
• 3、token值有的，vuex中的用戶id的值不存在的話，說明頁面刷新了，這個時候需要做兩個件事情，

A：設置vuex中的id的為本地緩存的用戶id ，

B：重新請求權(quán)限接口，格式化后，動態(tài)添加到路由，然后重新用next實現(xiàn)接下來的路由跳轉(zhuǎn)，這里需要注意，請求的權(quán)限接口需要用async/wait 改成同步接口方便使用。

步驟1具體代碼如下圖所示：

• 其中標的數(shù)字1標示的是：本地緩存用戶token和id，
• 標的數(shù)字2的是：vuex中存入登錄用戶id，
• 標數(shù)字3是：，接口請求后，格式化后，并使用router.addRoutes動態(tài)加入路由

步驟2的代碼實現(xiàn)方式如下圖所示：

• 其中標注的1是：判斷本地token的值，沒有token的話，直接跳轉(zhuǎn)登錄頁面，
• 標注2是：token值有的，vuex中的用戶id存在的話，頁面只是路由切換，用next讓路由正常流轉(zhuǎn)下去 ，
• 標注3：token值有的，vuex中的用戶id的值不存在的話，說明頁面刷新了，這個時候需要做兩個件事情，

A：設置vuex中的id的為本地緩存的用戶id ，

B：重新請求權(quán)限接口，格式化后，動態(tài)添加到路由，然后重新用next實現(xiàn)接下來的路由跳轉(zhuǎn)

下圖是管理vuex中的欄目的，前面說了，可以更具使用情況，緩存本地還是vuex中，只是存放的地方和路由的格式化，路由的格式化，需要根據(jù)需要自己格式化

總結(jié)

1、vue項目在初始化后，vue-router的實例后生成的路由只包含靜態(tài)路由，就是那些寫死的路由

2、動態(tài)路由添加本人認為最核心的不是router.addRoutes，這個大家都會，是如何判斷當前頁面是路由切換還是頁面刷新，

上面已經(jīng)說了思路，也有代碼，可以多試試

這些僅為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論