解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx
更新時間：2024年03月07日 09:44:41 作者：進(jìn)擊的potato
這篇文章主要介紹了解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
出現(xiàn)這個問題是因?yàn)?/h2>
當(dāng)我們在使用vue-Route4.0以前的版本的時候，我們采用的404錯誤頁面的路徑，是用router.addRoutes或者push動態(tài)添加進(jìn)去的
但是vue-Route4.0版本更新以后，刷新頁面或者第一次訪問動態(tài)的路由，全局守衛(wèi)beforeEach執(zhí)行
但是這時候我們還沒有動態(tài)追加路由，找不到，而且我們是后續(xù)追加的404，從而導(dǎo)致第一次路由的matched為空
控制臺打印結(jié)果：
vue-Route4.0版本已經(jīng)不需要我們?nèi)討B(tài)添加404路由了
直接在router/index.ts文件中添加一個404路由即可，使用通配符匹配。
值得注意的是
添加的路由不要加上name：’404‘
這樣刷新后會跳轉(zhuǎn)至404頁面，不會留在刷新前的頁面。
{
path: '/:catchAll(.*)',
// name: 'TempRoute', // 這里不要加
hidden: true,
component: () => import('@/views/error/404.vue') //這個是我自己的路徑
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue模板中啟用這些表現(xiàn)力庫插件的最簡單方法是在初始化項(xiàng)目時安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫樣式,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了如何在Vue項(xiàng)目中使用moment和moment-timezone插件處理時區(qū),包括安裝依賴、基礎(chǔ)使用方法（如時區(qū)轉(zhuǎn)換）、全局掛載以及注意事項(xiàng)（如時區(qū)標(biāo)識規(guī)范、UTC時間處理和Vue3適配）,需要的朋友可以參考下2026-03-03
用Vue.js實(shí)現(xiàn)監(jiān)聽屬性的變化
響應(yīng)系統(tǒng)是Vue.js的一個顯著功能，修改屬性，可以更新視圖，這讓狀態(tài)管理變得非常簡單且直觀。這篇文章主要給大家介紹如何利用Vue.js實(shí)現(xiàn)觀察屬性的變化，有需要的朋友們可以參考借鑒，感興趣的朋友們下面來一起看看吧。2016-11-11
vue axios post發(fā)送復(fù)雜對象問題
現(xiàn)在vue項(xiàng)目中，一般使用axios發(fā)送請求去后臺拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復(fù)雜對象的一點(diǎn)思考,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了前端axios取消請求總結(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)豎屏滾動公告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue filter介紹及詳細(xì)使用,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
使用element-ui設(shè)置table組件寬度(width)為百分比
這篇文章主要介紹了使用element-ui設(shè)置table組件寬度(width)為百分比方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue使用pages構(gòu)建多頁應(yīng)用的實(shí)現(xiàn)步驟
在大部分實(shí)際場景中,我們都可以構(gòu)建單頁應(yīng)用來進(jìn)行項(xiàng)目的開發(fā)和迭代,然而對于項(xiàng)目復(fù)雜度過高或者頁面模塊之間差異化較大的項(xiàng)目,我們可以選擇構(gòu)建多頁應(yīng)用來實(shí)現(xiàn),那么什么是多頁應(yīng)用,本文就給大家介紹了Vue使用pages構(gòu)建多頁應(yīng)用的實(shí)現(xiàn)步驟2024-12-12
這篇文章主要介紹了vue-cli3中配置alias和打包加hash值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09