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