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

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: "/"
}

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

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

v html如何添加样式,详解三种方式解决vue中v-html元素中标签样式
Vue为v-html中标签添加CSS样式 {{news.title}} {{news.datetime}} 返回列表当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果, .con{ ...
vue v-html字体大小修改,详解三种方式解决vue中v-html元素中标签样式
Vue为v-html中标签添加CSS样式 {{news.title}} {{news.datetime}} 返回列表当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果, .con{ ...
vue路由跳转权限_vue权限路由实现方式总结
使用全局路由守卫实现前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...
8种方法解决vue创建项目报错：command failed: npm install --loglevel error
8种方法解决vue项目创建失败问题 1.重建项目 2.清除缓存 3.重装淘宝源 4.修改useTaobaoRegistry 5.重装node 6.删除npmrc文件 7. node版本问题 8.css ...
php 迭代器迭代中文时重复,3种方式解决iterator迭代器并发修改异常
3种方式解决iterator迭代器并发修改异常ConcurrentModificationException 在使用迭代器的时候,时长会遇到 ConcurrentModificationExcepti ...
Qt工作笔记-三种方式解决Qt5中文编码问题
目录前言方式一方式二方式三三种方式解决Qt5中文编码问题前言这里不谈原理,只说如何去做! 这里本人自己总结下,今天遇到了新的编码问题,在此记录下,方面以后快速调用. 把这三种方法顺序试下 ...
解决vue项目在ie、360兼容模式下空白页面问题
完美解决vue项目在ie.360兼容模式下空白页面,并提示语法错误的原因艰难路程解决办法艰难路程事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解 ...
vue 函数路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...

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

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

最新文章

热门文章