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

