解决vue2.0路由跳转未匹配相应路由而出现空白页面的问题

在做项目的时候， 遇到前端控制路由跳转， 但是当用户手动输入错误的路由，或者是一些不符合的路由的时候， 页面就会出现一片空白， 也没有任何报错消息。

正常我们应该首先想到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(); //如果匹配到正确跳转        }});