Vue3.0動態(tài)路由No?match?found?for?location?with?path警告解決辦法
在Vue3中使用router.addRoute動態(tài)添加路由時,由于路由添加是異步的,第一次不會匹配到未添加的路由導致警告,先把404寫在固定路由里面,用來捕獲第一次未匹配到的路由,就不會有警告了,但是會出現(xiàn)一刷新就跳轉(zhuǎn)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的數(shù)據(jù)在permissionsState.getRoutes()中設置
if (!permissionsState.routes.length) {
// 獲取要加載的路由
const accessRoutes = await permissionsState.getRoutes()
accessRoutes.forEach((item) => router.addRoute(item))
// 這里是核心代碼,因為第一次匹配不到會跳轉(zhuǎn)404
// 所以跳轉(zhuǎn)到404的時候再做一個操作
if (to.path == '/404' && to.redirectedFrom) {
next({ path: to.redirectedFrom.fullPath, replace: true })
} else {
next({ ...to, replace: true }) // 這里相當于push到一個頁面 不在進入路由攔截
}
} else {
next() // 如果不傳參數(shù)就會重新執(zhí)行路由攔截,重新進到這里
}
} catch (err) {
next(`/login?redirect=${to.path}`)
}總結(jié)
到此這篇關(guān)于Vue3.0動態(tài)路由No match found for location with path警告解決的文章就介紹到這了,更多相關(guān)Vue3.0 No match found for location with path警告內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
validate?注冊頁的表單數(shù)據(jù)校驗實現(xiàn)詳解
這篇文章主要為大家介紹了validate?注冊頁的表單數(shù)據(jù)校驗實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09
微信小程序地圖導航功能實現(xiàn)完整源代碼附效果圖(推薦)
這篇文章主要介紹了微信小程序地圖導航功能實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
詳解vue2.0+axios+mock+axios-mock+adapter實現(xiàn)登陸
這篇文章主要介紹了詳解vue2.0+axios+mock+axios-mock+adapter實現(xiàn)登陸,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue.js實現(xiàn)格式化時間并每秒更新顯示功能示例
這篇文章主要介紹了vue.js實現(xiàn)格式化時間并每秒更新顯示功能,結(jié)合實例形式分析了vue.js時間格式化顯示與基于定時器進行實時更新的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Vue/React/Angular渲染失效原因解析與修復指南
在Vue、React和Angular中,為什么數(shù)據(jù)變了界面卻不動,每個框架的常見失效場景有哪些,我們又該如何診斷和修復,下面小編就來和大家簡單聊聊吧2025-08-08

