第一种方法:使用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 
  }

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐