解决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 
  }

 

posted @ 2022-12-05 16:10  front-gl  阅读(2565)  评论(0)    收藏  举报