最新下载
热门教程
- 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(); //如果匹配到正确跳转
}
});
相关文章
- 价格跟踪交易-价格跟踪交易软件 04-25
- 碧蓝航线使用要注意什么 04-25
- 明日之后苹果能做什么食物攻略 04-25
- 以闪亮之名浅栗捏脸数据id攻略 04-25
- 逆水寒手游春归学堂奇遇如何完成 04-25
- 明日之后二层别墅建造蓝图攻略 04-25