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警告的解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
在Vue3中使用router.addRoute動態(tài)添加路由時，由于路由添加是異步的，第一次不會匹配到未添加的路由導(dǎo)致警告，先把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()中設(shè)置
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 }) // 這里相當(dāng)于push到一個頁面 不在進(jìn)入路由攔截
}
} else {
next() // 如果不傳參數(shù)就會重新執(zhí)行路由攔截，重新進(jìn)到這里
}
} 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)文章
本文介紹了Vue keep-alive組件的使用及如何清除緩存,給大家分享清除緩存的幾種方法,結(jié)合實例代碼給大家講解的非常詳細(xì),需要的朋友跟隨小編一起看看吧2023-10-10
微信的浮窗，大伙應(yīng)該都用過，當(dāng)我們正在閱讀一篇公眾號文章時，突然需要處理微信消息，點擊浮窗，在微信上會有個浮標(biāo)，點擊浮標(biāo)可以再次回到文章。今天小編抽空給大家介紹vue 實現(xiàn)微信浮標(biāo)效果，感興趣的朋友一起看看吧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技術(shù)開發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項目。本文通過實例圖文的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2019-11-11
在現(xiàn)代Web應(yīng)用開發(fā)中,異步操作是常見的挑戰(zhàn),本文介紹了Vue3中管理多個異步操作的方法,幫助開發(fā)者提高編碼效率和應(yīng)用性能,感興趣的朋友跟隨小編一起看看吧2024-09-09
前端Vue通過Minio返回的URL下載文件實現(xiàn)方法
Minio是一個靈活、高性能、開源的對象存儲解決方案,適用于各種存儲需求,并可以與云計算、容器化、大數(shù)據(jù)和應(yīng)用程序集成,這篇文章主要給大家介紹了關(guān)于前端Vue通過Minio返回的URL下載文件實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-07-07
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)2022-08-08
Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能
這篇文章主要介紹了Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07