2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

Posted 2021-11-22 qianjin888

https://www.cnblogs.com/goloving/p/9254084.html

 

https://www.cnblogs.com/goloving/p/9254084.html

 

1、路由全局守卫

　　在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但实际上通过redirect是没办法更好解决这个问题的。看代码红色部分

复制代码
router.beforeEach((to, from, next) => {
  if (to.matched.length ===0) {  //如果未匹配到路由
    from.name ? next({ name:from.name }) : next(‘/‘);   //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
  } else {
    next();    //如果匹配到正确跳转
  }
});
复制代码
2、重定向

　　有时，我们可能会输入错的 url， 或者不再存在等各种原因导致其不再能被访问，那么我们就可以对于这种情况进行重定向。 很简单，只要在路由中添加下面的代码就可以了：

复制代码
//创建路由对象并配置路由规则
let router = new VueRouter({
    routes:[
       {path:‘/‘,redirect:{name:"home"}},  // 重定向到主页
       {name:‘home‘,path:‘/home‘,component:Home},
       {path:‘/music‘,component:Music},
       {path:‘/movie‘,component:Movie},
       {name:‘img‘,path:‘/picture22‘,component:Picture},
       {name:‘musicDetail‘,path:‘/musicDetail/:id/:name‘,component:MusicDetail},
       {path:‘*‘,component:NotFound},//全不匹配的情况下，返回404，路由按顺序从上到下，依次匹配。最后一个*能匹配全部，
    ]
});
复制代码
　　或者下面这样，注意放到最后

{
      path: "*",
      redirect: "/"
}
　　即对于所有的（*代表所有）错误页面，我们都可以重定向到 "/" 中。