解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題
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) => { ? // ?從其他地方訪(fǎng)問(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è)參考,也希望大家多多支持腳本之家。
- vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題
- vue中@路徑無(wú)法跳轉(zhuǎn)到指定文件的解決
- Nginx配置Vue項(xiàng)目,無(wú)法按路徑跳轉(zhuǎn)及刷新404的解決方案
- vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問(wèn)題
- vue-router嵌套路由方式(頁(yè)面路徑跳轉(zhuǎn)但頁(yè)面顯示空白)
- vue路由相對(duì)路徑跳轉(zhuǎn)方式
- vue-router重寫(xiě)push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問(wèn)題
- vue頁(yè)面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法
相關(guān)文章
VUE頁(yè)面中通過(guò)雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的示例代碼
這篇文章主要介紹了VUE頁(yè)面中通過(guò)雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06不依任何賴(lài)第三方,單純用vue實(shí)現(xiàn)Tree 樹(shù)形控件的案例
這篇文章主要介紹了不依任何賴(lài)第三方,單純用vue實(shí)現(xiàn)Tree 樹(shù)形控件的案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式
這篇文章主要介紹了vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
在之前做個(gè)一個(gè)組件頁(yè)面中,引用了element-ui組件的日期選擇器,遇到的一個(gè)小問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后時(shí)間的相關(guān)資料,需要的朋友可以參考下2022-08-08vue如何使用watch監(jiān)聽(tīng)指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽(tīng)指定數(shù)據(jù)的變化,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue router重定向redirect如何傳值問(wèn)題
這篇文章主要介紹了Vue router重定向redirect如何傳值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10