Vue3.0動態(tài)路由No?match?found?for?location?with?path警告解決辦法
更新時間：2025年01月18日 08:39:29 作者：程序員Slute
這篇文章主要介紹了Vue3.0動態(tài)路由No?match?found?for?location?with?path警告的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
在Vue3中使用router.addRoute動態(tài)添加路由時，由于路由添加是異步的，第一次不會匹配到未添加的路由導致警告，先把404寫在固定路由里面，用來捕獲第一次未匹配到的路由，就不會有警告了，但是會出現一刷新就跳轉404
{
path: '/404',
name: '404',
component: () => import('@/views/error/404.vue'),
hidden: true,
meta: { title: "找不到此頁面" }
},
{
path: '/:pathMatch(.*)',
name: 'notFound',
hidden: true,
redirect: '/404',
},所以在router.beforeEach里面需要判斷一下，userPermissionsStore是使用了pinia存routes
try {
const permissionsState = userPermissionsStore()
// 判斷是否添加成功
// permissionsState.routes的數據在permissionsState.getRoutes()中設置
if (!permissionsState.routes.length) {
// 獲取要加載的路由
const accessRoutes = await permissionsState.getRoutes()
accessRoutes.forEach((item) => router.addRoute(item))
// 這里是核心代碼，因為第一次匹配不到會跳轉404
// 所以跳轉到404的時候再做一個操作
if (to.path == '/404' && to.redirectedFrom) {
next({ path: to.redirectedFrom.fullPath, replace: true })
} else {
next({ ...to, replace: true }) // 這里相當于push到一個頁面 不在進入路由攔截
}
} else {
next() // 如果不傳參數就會重新執(zhí)行路由攔截，重新進到這里
}
} catch (err) {
next(`/login?redirect=${to.path}`)
}總結
到此這篇關于Vue3.0動態(tài)路由No match found for location with path警告解決的文章就介紹到這了,更多相關Vue3.0 No match found for location with path警告內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了validate?注冊頁的表單數據校驗實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序地圖導航功能實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
開發(fā)項目的時候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關于vue3+koa實現文件上傳功能的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue實現二級導航欄效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了vue+swiper實現時間軸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了vue中配置mint-ui報css錯誤問題的解決方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了基于vue實現簡易打地鼠游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
詳解vue2.0+axios+mock+axios-mock+adapter實現登陸
這篇文章主要介紹了詳解vue2.0+axios+mock+axios-mock+adapter實現登陸，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue.js實現格式化時間并每秒更新顯示功能,結合實例形式分析了vue.js時間格式化顯示與基于定時器進行實時更新的相關操作技巧,需要的朋友可以參考下2018-07-07
Vue/React/Angular渲染失效原因解析與修復指南
在Vue、React和Angular中,為什么數據變了界面卻不動,每個框架的常見失效場景有哪些,我們又該如何診斷和修復,下面小編就來和大家簡單聊聊吧2025-08-08