vue?使用addRoutes動(dòng)態(tài)添加路由及刷新頁(yè)面跳轉(zhuǎn)404路由的問題解決方案
在做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ù)組。
遇到的問題：
我自己使用addRoutes動(dòng)態(tài)添加的路由頁(yè)面，使用router-link標(biāo)簽可以跳轉(zhuǎn)，但是一刷新就會(huì)自動(dòng)跳轉(zhuǎn)到我定義的通配符 * 指向的404路由頁(yè)面。這說(shuō)明沒有找到指定路由才跳到404路由的。
我的默認(rèn)路由是這樣子的(這是還沒處理后端路由的公共路由也就是誰(shuí)都有的路由):
在使用addRoutes之前我就定義了，通配符 * 跳轉(zhuǎn)到404頁(yè)面如下圖： 這就是問題所在。
解決方法是 不要再路由中添加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 還沒有添加上 路由就開始跳轉(zhuǎn)了 所以找不到路由就跳轉(zhuǎn)到404頁(yè)面了。
在網(wǎng)上找了許久發(fā)現(xiàn)是 不能在自己寫的路由里邊添加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路由的問題的文章就介紹到這了,更多相關(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)傳參或者打開新頁(yè)面跳轉(zhuǎn)問題
- vue3配置router路由并實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能
- Vue路由跳轉(zhuǎn)傳參或打開新頁(yè)面跳轉(zhuǎn)的方法總結(jié)
- Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格鏈接頁(yè)面跳轉(zhuǎn)和路由效果
- Vue路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的示例代碼
相關(guān)文章
在Vue2項(xiàng)目中使用Mock.js的詳細(xì)教程
Mock.js?是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請(qǐng)求的?JavaScript?庫(kù),它非常適合在前端開發(fā)中模擬后端?API,尤其是在前后端分離的開發(fā)模式下,本文給大家介紹了如何在Vue2項(xiàng)目中使用Mock.js,需要的朋友可以參考下2024-10-10
vue3生命周期原理與生命周期函數(shù)簡(jiǎn)單應(yīng)用實(shí)例分析
這篇文章主要介紹了vue3生命周期原理與生命周期函數(shù),結(jié)合簡(jiǎn)單實(shí)例形式分析了vue3的生命周期基本原理、以及各個(gè)階段的生命周期鉤子函數(shù)功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04
WebSocket是一種全雙工通信協(xié)議,通過(guò)HTTP升級(jí)機(jī)制建立連接,支持實(shí)時(shí)雙向數(shù)據(jù)傳輸,示例代碼展示了如何在Java Spring Boot和Vue.js中實(shí)現(xiàn)WebSocket服務(wù)和客戶端2025-02-02
vue完美實(shí)現(xiàn)el-table列寬自適應(yīng)
這篇文章主要介紹了vue完美實(shí)現(xiàn)el-table列寬自適應(yīng)，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vscode中Vue別名路徑提示的實(shí)現(xiàn)
這篇文章主要介紹了vscode中Vue別名路徑提示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue 封裝自定義組件之tabal列表編輯單元格組件實(shí)例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實(shí)例代碼,需要的朋友可以參考下2017-09-09
vue 路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),傳參方式可劃分為 params 傳參和 query 傳參,本文將給大家介紹如何通過(guò)不同方式在 Vue 3 中傳遞路由參數(shù),需要的朋友可以參考下2024-07-07
Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報(bào)錯(cuò)對(duì)象類型是unknow的解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue3中的render函數(shù)里定義插槽和使用插槽方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07