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寫在固定路由里面，用來捕獲第一次未匹配到的路由，就不會有警告了，但是會出現(xià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))
// 這里是核心代碼，因為第一次匹配不到會跳轉404
// 所以跳轉到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}`)
}總結
到此這篇關于Vue3.0動態(tài)路由No match found for location with path警告解決的文章就介紹到這了,更多相關Vue3.0 No match found for location with path警告內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文介紹了Vue keep-alive組件的使用及如何清除緩存,給大家分享清除緩存的幾種方法,結合實例代碼給大家講解的非常詳細,需要的朋友跟隨小編一起看看吧2023-10-10
微信的浮窗，大伙應該都用過，當我們正在閱讀一篇公眾號文章時，突然需要處理微信消息，點擊浮窗，在微信上會有個浮標，點擊浮標可以再次回到文章。今天小編抽空給大家介紹vue 實現(xiàn)微信浮標效果，感興趣的朋友一起看看吧2019-09-09
vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明
這篇文章主要介紹了vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue 表單輸入框不支持focus及blur事件的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-router如何實現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實現(xiàn)history模式配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
基于vue+uniapp直播項目實現(xiàn)uni-app仿抖音/陌陌直播室功能
uni-liveShow是一個基于vue+uni-app技術開發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項目。本文通過實例圖文的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-11-11
在現(xiàn)代Web應用開發(fā)中,異步操作是常見的挑戰(zhàn),本文介紹了Vue3中管理多個異步操作的方法,幫助開發(fā)者提高編碼效率和應用性能,感興趣的朋友跟隨小編一起看看吧2024-09-09
前端Vue通過Minio返回的URL下載文件實現(xiàn)方法
Minio是一個靈活、高性能、開源的對象存儲解決方案,適用于各種存儲需求,并可以與云計算、容器化、大數(shù)據(jù)和應用程序集成,這篇文章主要給大家介紹了關于前端Vue通過Minio返回的URL下載文件實現(xiàn)的相關資料,需要的朋友可以參考下2024-07-07
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關系，下面是我對組件之間消息傳遞的常用方式的總結2022-08-08
這篇文章主要介紹了Vue.js遞歸組件實現(xiàn)組織架構樹和選人功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07