最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
时间：2022-06-25 15:43: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(); //如果匹配到正确跳转
}
});
相关文章
- 原神女角色免费在线观看入口-原神女角色高清合集网站在线看 01-28
- 动漫一人之下6在哪看？动漫一人之下6全集高清未删减在线观看入口地址 01-28
- 绝版电影软件哪款强-绝版电影观影神器推荐 01-28
- 126邮箱官网入口-126邮箱免费注册官方直达 01-28
- vscode中国官网入口-vscode网页版在线入口 01-28
- 王者荣耀大乔去衣无遮挡高清图分享-王者荣耀大乔去衣无遮挡高清图大全 01-28