vue-router路由守卫解决跳转非组件视图空白页

vue-router是个挺好玩的模块,很多配置项都有很好的利用价值.运用好了真的事半功倍

• 路由守卫解决跳转非组件视图
  首先router在cli的是图中是独立存在router的文件夹中,我们首先要更改index.js来加入全局的路由守卫

//首先
import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/view/Main'
const router=new new Router({
    routes:[{
            path: '/',
            name: 'Main',
            component: Main}]
})

//配置路由守卫
router.beforeEach((to, from, next) => {//在每次涂油跳转的时候都触发一次

    if (to.matched.length === 0) { // 如果未匹配到路由
        from.name ? next({ name: from.name }) : next('/'); // 如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
    } else {
        next(); // 如果匹配到正确跳转
    }
});

export default router
复制代码

这样在每次的页面跳转都会根据地址栏的路径来进行匹配.