解决vue2.0路由跳转未匹配相应路由而出现空白页面的问题
Vue 路由跳转 出现空白页面redirect
·
在做项目的时候, 遇到前端控制路由跳转, 但是当用户手动输入错误的路由,或者是一些不符合的路由的时候, 页面就会出现一片空白, 也没有任何报错消息。
正常我们应该首先想到redirect去重定向路由, 可是测试发现http://localhost:3008/#/ 如果我们输入的地址是酱紫的, 页面并不能按照我们所想要实现的跳转到首页。
export default [
{
path: '/home',
component: App,
title: '运维管理',
children: [
{
name: 'homeMain',
path: '',
title: '子页面',
component: require('../containers/homeMain/index')
}
],
extra: {
inMenu: true,
icon: 'el-icon-chain'
}
},
{
path: '/examine',
component: App,
title: '审核',
children: [
{
name: 'manger',
path: '',
title: '审核',
component: require('../containers/manger/index')
}
],
extra: {
inMenu: true,
icon: 'el-icon-chain'
}
},
{
path: '*', //*号表示匹配任意内容
component: App,
title: '首页',
redirect: '/home',
extra: {
inMenu: false
}
}
];
那么是不是还有其他解决方法呢?
哈哈,重点代码如下:
router.beforeEach((to, from, next) => {
// 此处判断条件我有看到其他人用to.matched.length ===0进行判断, 具体的还有待进一步验证,大体的思路就是这样的
if (to.fullPath === '/') {
from.name ? next({ name:from.name }) : next('/home');
} else {
next(); //如果匹配到正确跳转
}
});
更多推荐
已为社区贡献7条内容
所有评论(0)