vue?使用addRoutes動(dòng)態(tài)添加路由及刷新頁(yè)面跳轉(zhuǎn)404路由的問(wèn)題解決方案
在做vue項(xiàng)目時(shí)需要使用后端給的路由權(quán)限，處理路由動(dòng)態(tài)添加到路由上，幾經(jīng)查找在 vue-Router中有個(gè)router.addRoutes 的方法。
官方使用方法及說(shuō)明 點(diǎn)我
router.addRoutes 函數(shù)簽名： router.addRoutes(routes: Array<RouteConfig>) 動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合 routes 選項(xiàng)要求的數(shù)組。
遇到的問(wèn)題：
我自己使用addRoutes動(dòng)態(tài)添加的路由頁(yè)面，使用router-link標(biāo)簽可以跳轉(zhuǎn)，但是一刷新就會(huì)自動(dòng)跳轉(zhuǎn)到我定義的通配符 * 指向的404路由頁(yè)面。這說(shuō)明沒(méi)有找到指定路由才跳到404路由的。
我的默認(rèn)路由是這樣子的(這是還沒(méi)處理后端路由的公共路由也就是誰(shuí)都有的路由):
在使用addRoutes之前我就定義了，通配符 * 跳轉(zhuǎn)到404頁(yè)面如下圖： 這就是問(wèn)題所在。
解決方法是 不要再路由中添加404頁(yè)面 在addRoutes里進(jìn)行拼接 (通配符 * 跳轉(zhuǎn)到404頁(yè)面的路由)(也就是動(dòng)態(tài)添加紅色框中的內(nèi)容)
下邊有詳細(xì)代碼：
在beforeEach中打印 to發(fā)現(xiàn)是404 打印from顯示是/
這樣子更可以確定 當(dāng)頁(yè)面一刷新 addRoutes 還沒(méi)有添加上 路由就開(kāi)始跳轉(zhuǎn)了 所以找不到路由就跳轉(zhuǎn)到404頁(yè)面了。
在網(wǎng)上找了許久發(fā)現(xiàn)是 不能在自己寫(xiě)的路由里邊添加404 要在addRoutes中添加404頁(yè)面不然就會(huì)跳轉(zhuǎn)404 所以我把代碼改成下面這個(gè)樣子 最后添加路由的 通配符 * 跳轉(zhuǎn)404 頁(yè)面果然好了
到此這篇關(guān)于vue 使用addRoutes動(dòng)態(tài)添加路由 刷新頁(yè)面跳轉(zhuǎn)404路由的問(wèn)題的文章就介紹到這了,更多相關(guān)vue 使用addRoutes動(dòng)態(tài)添加路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue路由攔截及頁(yè)面跳轉(zhuǎn)的設(shè)置方法
- Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格中鏈接進(jìn)行頁(yè)面跳轉(zhuǎn)與路由詳解
- Vue路由跳轉(zhuǎn)傳參或者打開(kāi)新頁(yè)面跳轉(zhuǎn)問(wèn)題
- vue3配置router路由并實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能
- Vue路由跳轉(zhuǎn)傳參或打開(kāi)新頁(yè)面跳轉(zhuǎn)的方法總結(jié)
- Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格鏈接頁(yè)面跳轉(zhuǎn)和路由效果
- Vue路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的示例代碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉菜單樹(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
在Vue項(xiàng)目和微信小程序中生成二維碼和條形碼是一個(gè)常見(jiàn)的需求,主要用于分享、產(chǎn)品識(shí)別等場(chǎng)景,這篇文章主要給大家介紹了關(guān)于使用Vue3生成二維碼和條形碼的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue3解析學(xué)習(xí)handlers 模塊的相關(guān)資料,需要的朋友可以參考下2026-02-02
這篇文章主要介紹了vue3全局導(dǎo)入bootstrap5方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue狀態(tài)管理庫(kù)Pinia詳細(xì)介紹
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡(jiǎn)單來(lái)說(shuō)相當(dāng)于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)移動(dòng)端touch拖拽排序
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端touch拖拽排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue判斷數(shù)組內(nèi)是否存在某一項(xiàng)的兩種方法
這篇文章主要介紹了Vue判斷數(shù)組內(nèi)是否存在某一項(xiàng),今天給大家分享兩種方法，分別是findIndex()和 indexOf()方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
Vue-cli 移動(dòng)端布局和動(dòng)畫(huà)使用詳解
這篇文章主要介紹了Vue-cli和移動(dòng)端布局和動(dòng)畫(huà)使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
解決Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題
這篇文章主要介紹了Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解vue 兼容IE報(bào)錯(cuò)解決方案，詳細(xì)的介紹了幾種原因及其解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12