vue项目路径不正确,自动跳转404
第一种方法
第二种
vue路由判断跳转404页面
vue项目路径不正确,自动跳转404 第一种方法使用vuerouter钩子函数beforeEach，每次进行路由跳转时都进行判断，若页面不存在就跳转到404页面。
import Error from ' '
const router = new Router({
routes:[
name: 'error',
path: '/error',
component: Error
]
}
//beforeEach每次进行路由跳转时都会执行
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
},
//这个*匹配必须放在最后，将改路由配置放到所有路由的配置信息的最后，否则会其他路由path匹配造成影响。
{ path: '*',
redirect: '/404',
hidden: true
}
vue路由判断跳转404页面
beforeEach函数 这是路由跳转前处理的函数
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) => {
// 从其他地方访问是否有这个地址
if(to.matched.length == 0){
from.path ? next({name: from.name}) : next('*')
}
next();
});
第二种方法就是重定向地址 同上
修改routes中的地址
{
path: '/404',
name: 'PageNotFound',
component: PageNotFound,
},
{
path:'*',
redirect:'/404'
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。