时间:2021-05-18
在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面。不管你有没有写一个404页面,当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向,redirect来解决这个问题。但实际上通过redirect是没办法更好解决这个问题的。
看代码红色部分
import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'Vue.use(Router)let routes = [ { path: '/', name: 'Login', component: Login }, { path: '/login', name: 'Login', component: Login }, { path: '/index', name: 'Index', component: Hello, }];const router = new Router({ history: true, routes : routes});重点如下:
router.beforeEach((to, from, next) => {
if (to.matched.length ===0) { //如果未匹配到路由
from.name ? next({ name:from.name }) : next('/'); //如果上级也未匹配到路由则跳转登录页面,如果上级能匹配到则转上级路由
} else {
next(); //如果匹配到正确跳转
}
});
以上这篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫。分为全局导航钩子,单个路由独享的钩子,组件内钩子。三种类型的钩子只是用的
本文实例讲述了vue2嵌套路由实现方法。分享给大家供大家参考,具体如下:前面讲过了vue2路由基本用法,一般应用中的路由方式不会像上述例子那么简单,往往会出现二
vue2.0keep-alive的最佳实践,供大家参考,具体内容如下1.基本用法vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组
最新的项目刚刚用上Vue,遇到很多问题,在Tomcat下部署时出现了页面空白。问题:路由modehistory模式在dev模式下没有问题,在build模式页面空
前言vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-rout