解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題

更新時(shí)間：2022年10月09日 08:38:00 作者：不另外加糖

這篇文章主要介紹了解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404

第一種方法

使用vuerouter鉤子函數(shù)beforeEach，每次進(jìn)行路由跳轉(zhuǎn)時(shí)都進(jìn)行判斷，若頁(yè)面不存在就跳轉(zhuǎn)到404頁(yè)面。

import Error from ' '
?
const router = new Router({
? ? routes:[
? ? ? ? name: 'error',
? ? ? ? path: '/error',
? ? ? ? component: Error
? ? ]
}
?
//beforeEach每次進(jìn)行路由跳轉(zhuǎn)時(shí)都會(huì)執(zhí)行
router.beforeEach((to,from,next){
? ? if(to.matched.length === 0){
? ? ? ? from.path ? next({name: from.name}) : next('/error')
? ? }else{
? ? ? ? next()
? ? }
})
?
export default router

第二種

redirect重定向

?{ ? ? path: '/404', ? ? ??
? ? ? ?component: () => import('@/views/error-page/404'), ? ? ??
? ? ? ?hidden: true ? ??
? },?
? ??
//這個(gè)*匹配必須放在最后，將改路由配置放到所有路由的配置信息的最后，否則會(huì)其他路由path匹配造成影響。 ? ??
?{ ? ? path: '*',
? ? ? ?redirect: '/404',?
? ? ? ?hidden: true?
? }

vue路由判斷跳轉(zhuǎn)404頁(yè)面

beforeEach函數(shù) 這是路由跳轉(zhuǎn)前處理的函數(shù)

import PageNotFound from '@/views/pages/404.vue'
Vue.use(Router)
const routes=[
? {
? ? path: '*',
? ? name: 'PageNotFound',
? ? component: PageNotFound,
? },
]?
?
const router = new Router({
? mode: 'history',
? routes: routes
})
?
router.beforeEach((to, from, next) => {
? // ?從其他地方訪問(wèn)是否有這個(gè)地址
? ? if(to.matched.length == 0){
? ? ? from.path ? next({name: from.name}) : next('*')
? ? }
? ? next();
});

第二種方法就是重定向地址同上

修改routes中的地址

? {
? ? path: '/404',
? ? name: 'PageNotFound',
? ? component: PageNotFound,
? },
? {
? ? path:'*',
? ? redirect:'/404'
? ?}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js?模板語(yǔ)法和數(shù)據(jù)綁定
這篇文章主要介紹了Vue.js?模板語(yǔ)法和數(shù)據(jù)綁定，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-05-05
vant list組件滾動(dòng)保留滾動(dòng)條位置
這篇文章主要介紹了vant list組件滾動(dòng)保留滾動(dòng)條位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue中拆分組件的實(shí)戰(zhàn)案例
最近在學(xué)vue,試著寫(xiě)個(gè)單頁(yè)應(yīng)用,在寫(xiě)組件,拆分組件時(shí)遇到一些困惑,下面這篇文章主要給大家介紹了關(guān)于vue中拆分組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
基于vue 開(kāi)發(fā)中出現(xiàn)警告問(wèn)題去除方法
下面小編就為大家分享一篇基于vue 開(kāi)發(fā)中出現(xiàn)警告問(wèn)題去除方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue寫(xiě)一個(gè)全局彈窗組件通過(guò)js調(diào)用的方法
彈窗效果是在Web開(kāi)發(fā)中經(jīng)常用到的一種交互效果,它可以在用戶點(diǎn)擊某個(gè)按鈕或者觸發(fā)某個(gè)事件時(shí)顯示一個(gè)懸浮框,提供用戶與頁(yè)面進(jìn)行交互的機(jī)會(huì),這篇文章主要給大家介紹了關(guān)于vue寫(xiě)一個(gè)全局彈窗組件通過(guò)js調(diào)用的方法,需要的朋友可以參考下
2024-06-06
vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue實(shí)現(xiàn)一個(gè)懶加載的樹(shù)狀表格實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)懶加載的樹(shù)狀表格實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue3中虛擬dom的介紹與使用詳解
Vue?是如何將一份模板轉(zhuǎn)換為真實(shí)的?DOM?節(jié)點(diǎn)的,又是如何高效地更新這些節(jié)點(diǎn)的呢,這些都離不開(kāi)虛擬dom這個(gè)概念,下面我們就來(lái)了解下虛擬dom這個(gè)概念以及它是什么吧
2024-01-01
Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案
這篇文章主要給大家介紹了關(guān)于Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟
本文主要介紹了Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01