首页 > 其他分享 >解决vue项目路径不正确,自动跳转404

解决vue项目路径不正确,自动跳转404

时间:2022-12-05 16:23:40浏览次数:59  
标签:vue error next 404 跳转 path 路由

第一种方法:使用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,error,next,404,跳转,path,路由
From: https://www.cnblogs.com/mmzuo-798/p/16952608.html

相关文章