解决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(); //如果匹配到正确跳转
        }
});