vue后臺項(xiàng)目如何使用router.addRoutes動(dòng)態(tài)加入路由的思路
臺路由需求
根據(jù)用戶權(quán)限獲取菜單（也就是路由信息），動(dòng)態(tài)加載到路由當(dāng)中，實(shí)現(xiàn)正常路由切換。
1、最開始的實(shí)現(xiàn)方式
用戶登錄—>接口獲取當(dāng)前用戶的菜單信息—>格式化菜單信息（格式化成，路由格式）—>使用router.addRoutes動(dòng)態(tài)加入路由。
實(shí)現(xiàn)結(jié)果：
路由添加成功，并且能正常的跳轉(zhuǎn)。但是，當(dāng)我刷新頁面后頁面路由出錯(cuò)了，直接進(jìn)入了錯(cuò)誤頁面404。
問題原因：
vue在初始化的時(shí)候，vue-router的實(shí)例對象已經(jīng)生成了，當(dāng)前路由只包含了如登錄頁和404等靜態(tài)頁面，用戶權(quán)限獲取的路由需要在登錄成功后單獨(dú)請求權(quán)限接口再動(dòng)態(tài)添加到路由當(dāng)中，所以頁面在刷新的時(shí)候頁面會找不到對應(yīng)動(dòng)態(tài)的路由。
2、當(dāng)前的問題在于刷新后
vue和vue-router重新初始化會跳過權(quán)限接口的請求和添加動(dòng)態(tài)路由。
本人也卡在這個(gè)地方一下午，后面看了網(wǎng)上的處理方式和代碼，也整理了一份適應(yīng)自己項(xiàng)目的處理方式。
最終的思路
在路由的導(dǎo)航守衛(wèi)router.beforeEach中判斷當(dāng)前是頁面刷新還是路由切換，利用vuex的狀態(tài)值在頁面刷新就會重新初始化的特新和本地緩存localStorage存的登錄狀態(tài)值來判斷頁面刷新還是路由切換。
整體的實(shí)現(xiàn)方式如下:
最終的實(shí)現(xiàn)方式
注意點(diǎn)：我在vuex中緩存了用戶權(quán)限的接口返回的數(shù)據(jù)，可以根據(jù)需要存放在本地還是vuex都是可以的
1、用戶登錄—> 本地緩存用戶token和id
vuex中存入登錄用戶id（存的具體那個(gè)值,對還是錯(cuò)都不重要，值只是用來判斷頁面刷新還是路由切換，隨意存。。只是用于后續(xù)的判斷） —>接口獲取當(dāng)前用戶的菜單信息—>格式化菜單信息（格式化成，路由格式）—>使用router.addRoutes動(dòng)態(tài)加入路由。
2、在導(dǎo)航守衛(wèi)router.beforeEach的方法中
進(jìn)入路由后，判斷
- 1、本地緩存的token是否有值，沒有的話，說明用戶沒有登錄過，直接跳轉(zhuǎn)登錄頁面
- 2、token值有的，vuex中的用戶id存在的話，頁面只是路由切換，用next讓路由正常流轉(zhuǎn)下去
- 3、token值有的，vuex中的用戶id的值不存在的話，說明頁面刷新了，這個(gè)時(shí)候需要做兩個(gè)件事情，
A：設(shè)置vuex中的id的為本地緩存的用戶id ，
B：重新請求權(quán)限接口，格式化后，動(dòng)態(tài)添加到路由，然后重新用next實(shí)現(xiàn)接下來的路由跳轉(zhuǎn)，這里需要注意，請求的權(quán)限接口需要用async/wait 改成同步接口方便使用。
步驟1具體代碼如下圖所示：
- 其中標(biāo)的數(shù)字1標(biāo)示的是：本地緩存用戶token和id，
- 標(biāo)的數(shù)字2的是：vuex中存入登錄用戶id，
- 標(biāo)數(shù)字3是：，接口請求后，格式化后，并使用router.addRoutes動(dòng)態(tài)加入路由
步驟2的代碼實(shí)現(xiàn)方式如下圖所示：
- 其中標(biāo)注的1是：判斷本地token的值，沒有token的話，直接跳轉(zhuǎn)登錄頁面，
- 標(biāo)注2是：token值有的，vuex中的用戶id存在的話，頁面只是路由切換，用next讓路由正常流轉(zhuǎn)下去 ，
- 標(biāo)注3：token值有的，vuex中的用戶id的值不存在的話，說明頁面刷新了，這個(gè)時(shí)候需要做兩個(gè)件事情，
A：設(shè)置vuex中的id的為本地緩存的用戶id ，
B：重新請求權(quán)限接口，格式化后，動(dòng)態(tài)添加到路由，然后重新用next實(shí)現(xiàn)接下來的路由跳轉(zhuǎn)
下圖是管理vuex中的欄目的，前面說了，可以更具使用情況，緩存本地還是vuex中，只是存放的地方和路由的格式化，路由的格式化，需要根據(jù)需要自己格式化
總結(jié)
1、vue項(xiàng)目在初始化后，vue-router的實(shí)例后生成的路由只包含靜態(tài)路由，就是那些寫死的路由
2、動(dòng)態(tài)路由添加本人認(rèn)為最核心的不是router.addRoutes，這個(gè)大家都會，是如何判斷當(dāng)前頁面是路由切換還是頁面刷新，
上面已經(jīng)說了思路，也有代碼，可以多試試
這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了react里組件通信的幾種方式小結(jié),包含了5種方式,主要是props傳遞,回調(diào)函數(shù)作為props,Context,Redux或MobX,refs,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了Vue實(shí)現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開發(fā)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
Vue使用了基于HTML的模板語法,允許開發(fā)者聲明式地將DOM綁定至底層Vue實(shí)例的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue的模板語法以及案例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
element ui 對話框el-dialog關(guān)閉事件詳解
下面小編就為大家分享一篇element ui 對話框el-dialog關(guān)閉事件詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue函數(shù)式組件及vue函數(shù)式組件的優(yōu)缺點(diǎn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
純JS+Vue和canvas實(shí)現(xiàn)一個(gè)儀表盤方式
這篇文章主要介紹了純JS+Vue和canvas實(shí)現(xiàn)一個(gè)儀表盤方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對大家的項(xiàng)目來說非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細(xì)步驟,需要的朋友可以參考下2024-01-01
vue使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù),文中的示例講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
vue使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07