vue動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決
在我不知道vue的路由還可以通過(guò)addRoutes動(dòng)態(tài)添加時(shí)，我只知道vue的路由都是寫(xiě)死在路由表中的，每當(dāng)跳轉(zhuǎn)時(shí)再去加載相應(yīng)的路由。直到在一個(gè)新公司接到需要根據(jù)用戶的權(quán)限顯示不同的菜單的需求時(shí)才知道了原來(lái)vue-router還有一個(gè)addRoutes的API，立馬研究了一下。
router.addRoutes：
函數(shù)簽名：
router.addRoutes(routes: Array<RouteConfig>)
動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合routes選項(xiàng)要求的數(shù)組。
點(diǎn)這里去看router.addRoutes的官方解釋
白話就是需要?jiǎng)討B(tài)加入到路由表中的路由是必須要跟我們提前寫(xiě)死的路由規(guī)則是一樣的。
有了這個(gè)玩意兒我們就可以依據(jù)系統(tǒng)管理員給用戶分配的權(quán)限來(lái)實(shí)現(xiàn)不同的用戶可以進(jìn)入不同的菜單頁(yè)面的功能，是不是很nice？是不是很優(yōu)秀？
但這個(gè)還不是本文的重點(diǎn)，本文的重點(diǎn)是“不能將需要?jiǎng)討B(tài)添加的路由存入緩存！” 為什么這么說(shuō)呢？
先說(shuō)說(shuō)我們的需求吧。
我們的項(xiàng)目開(kāi)發(fā)中的動(dòng)態(tài)路由是提前配好在路由表中的，只是和靜態(tài)路由分開(kāi)寫(xiě)在了兩個(gè)對(duì)象中，導(dǎo)出的時(shí)候默認(rèn)只導(dǎo)出靜態(tài)路由，所謂的靜態(tài)路由就是所有用戶都可以訪問(wèn)到的公共路由，比如登錄頁(yè)面、404頁(yè)面等。而不同用戶可訪問(wèn)不同的菜單頁(yè)面是根據(jù)接口返回的一個(gè)菜單code來(lái)過(guò)濾提前配好的動(dòng)態(tài)路由(提前配好的動(dòng)態(tài)路由中也有一個(gè)code)，再將過(guò)濾后的路由使用router.addRoutes動(dòng)態(tài)添加即可?？赡苡行┕臼峭ㄟ^(guò)接口直接把用戶的動(dòng)態(tài)路由表按照路由的規(guī)則形式給返回了出來(lái)，前端只需拿到路由表稍作處理然后addRoutes就可以了。每個(gè)公司有每個(gè)公司的想法，你開(kāi)心就好！
接下來(lái)就是我們項(xiàng)目中的路由過(guò)濾了，這里省略1000字，路由過(guò)濾完成并動(dòng)態(tài)添加后就可以很愉快的訪問(wèn)菜單頁(yè)面了。但我想的是，在全局路由守衛(wèi)中請(qǐng)求接口返回的code（這里接口返回的是一個(gè)包含code和其他數(shù)據(jù)的json數(shù)組，所以我還得先把接口返回的code給過(guò)濾出來(lái)），然后再過(guò)濾路由，然后再動(dòng)態(tài)添加，這對(duì)性能來(lái)說(shuō)是一個(gè)不小的開(kāi)銷(xiāo)，所以我就琢磨著能不能把首次過(guò)濾好的路由給存在緩存中，這樣下次就可以直接動(dòng)態(tài)添加緩存中的路由了，豈不是是一件很美好的事情，結(jié)果是我想錯(cuò)了，你們都想錯(cuò)了！
來(lái)先看看過(guò)濾后打印出來(lái)的路由吧：
再來(lái)看看從緩存中讀出來(lái)的路由吧：
從兩張圖上紅色矩形圈圈可以看出，從緩存中讀出來(lái)的路由信息已經(jīng)發(fā)生了改變，父路由中的render方法也沒(méi)有了（第一張圖中父路由的render方法還是有的，到了第二張就沒(méi)有了），且子路由children里邊已經(jīng)沒(méi)有了component屬性（從第二張圖中的紅色箭頭處可以看出），這顯然不是我們想要的路由信息。有人說(shuō)可以使用import xxx from ‘xxx'來(lái)替代component的值，這個(gè)針對(duì)父路由的component都引用了同一個(gè)Layout組件來(lái)說(shuō)是可以的，但是子路由呢？從緩存中讀出來(lái)的子路由連component都沒(méi)有了，即使是有這個(gè)屬性，但子路由都引用了不同的component，那你怎么玩？況且將過(guò)濾后的路由信息通過(guò)緩存的存取來(lái)實(shí)現(xiàn)，安全上就會(huì)有問(wèn)題，因?yàn)槿绻麘羰謩?dòng)修改了緩存里的路由，那你所謂的動(dòng)態(tài)路由權(quán)限豈不是立馬破功了。
所以，我們能做的就只能是在每次切換路由時(shí)都要重新請(qǐng)求接口并根據(jù)返回的code來(lái)動(dòng)態(tài)過(guò)濾路由并添加，或者根據(jù)后端返回的動(dòng)態(tài)路由表直接添加，性能上浪費(fèi)一點(diǎn)也是沒(méi)有辦法的事兒，總比實(shí)現(xiàn)不了或不安全來(lái)的更好一點(diǎn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue和webpack安裝命令，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue項(xiàng)目中openlayers繪制行政區(qū)劃
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中openlayers繪制行政區(qū)劃，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼
輪播圖在開(kāi)發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
在最近一個(gè)項(xiàng)目的后臺(tái)管理系統(tǒng)中，寫(xiě)前端界面時(shí)用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來(lái)詳細(xì)的介紹一下2021-09-09
門(mén)戶（Portal）的概念是Vue3的新功能之一，也就是將模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常見(jiàn)功能，Vue2 的 portal-vue 庫(kù)也提供了相似的功能。在 Vue3 中用 Teleport 對(duì)這個(gè)概念提供了原生支持。本文將介紹Teleport的相關(guān)用法2021-05-05
詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過(guò)程
這篇文章主要介紹了詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
VUE中filters過(guò)濾器的兩種用法實(shí)例
vue中過(guò)濾器的作用可被用于一些常見(jiàn)的文本格式化,也就是修飾文本,但是文本內(nèi)容不會(huì)改變,下面這篇文章主要給大家介紹了關(guān)于VUE中filters過(guò)濾器的兩種用法,需要的朋友可以參考下2022-04-04
vue3使用quill富文本編輯器保姆級(jí)教程(附踩坑解決)
這篇文章主要給大家介紹了關(guān)于vue3使用quill富文本編輯器保姆級(jí)教程的相關(guān)資料,在許多網(wǎng)站和應(yīng)用程序中富文本編輯器是一種常見(jiàn)的工具,它使用戶能夠以直觀的方式創(chuàng)建和編輯文本內(nèi)容,需要的朋友可以參考下2023-11-11
vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
這篇文章主要介紹了vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能的相關(guān)資料,element-UI表格的使用相信大家都不陌生,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07