本例将通过一个简单的登录后获得路由跳转权限的案例来简单解释路由守卫（全局前置守卫）
案例场景：在许多业务中我们会遇到用户登录后才能访问某个路由的情况(不能通过地址栏手动跳转)，这事我们可能需要用到路由守卫。
1.首先新建3个vue,分别为About.vue,Home.vue和Index.vue。
然后在router中引入并在路由字典中注册：
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/i',
name: 'Index',
component: Index
},
{
path: '/a',
name: 'About',
component:About
}大家可以看到三个vue的路由名称及path路径分别对应Home.vue,Index.vue及About.vue
业务需求：
现假定业务需求为Home和About在任何时候都能访问，而Index路由则需要登录后才能访问
点击“去About”可以跳转，点击“去Index”不能跳转，点击“登录按钮”可以更改登录状态
const router = new VueRouter({
routes,
mode:'history'
})new一个router存放路由字典，mode该为history(mode各位随意...)
2.接下来我们去到Home.vue中，写出登录改变访问路由权限的函数，当用户点击“登录按钮”时会触发该函数
这里是Home，登录后才能跳转到Index
去About
去Index
{{logMsg}}
这里的logMsg保存在Home.vue的data里，默认为""也就是不会显示，当用户点击确定后会在h2标签中显示“登录成功可以跳转到Index了”
Login(){
if(confirm("你确定要登录吗？")){
this.logMsg = '登录成功可以跳转到Index了';
this.$store.commit("login",true);
}else{
this.logMsg = '登录失败'
this.$store.commit("login",false);
}
}无论确认或登录都会触发store里的mutations里的login函数(这里传false到store里是为了退出登录)
store里是这样的直接改变isLog的值
state: {
isLog:false
},
mutations: {
login(state,payload){
state.isLog = payload;
}
}这样我们就可以将store里的isLog由false改为true或者由true改为false以获得或失去访问Index的权限了。
3.以上我们已经实现了更改登录识别符号了，接下来就是具体的封堵路由和打开路由了，这里我们需要用到beforeEach方法，此方法里的回调函数拥有三个参数to,from和next分别代表来着要跳转到的路由的name，来自的路由的name和下一步需要执行的操作(中断跳转，继续跳转或者跳转到其他路由)。
router.beforeEach((to,from,next)=>{
if(to.name != 'Index'){
next();
}else if(to.name == 'Index' && $store.state.isLog){
next();
}else{
next(false);
}
})解释下上边的代码第一个if后条件意思为如果要跳转到的路由的name不为Index时就继续执行跳转到需要跳转的路由（也就是说要跳转到Index路由就不行）。
第二个if后的条件的意思为如果要跳转的路由的name为Index且登录状态满足时也可以继续跳转，继续执行该跳转（也就是说store里的isLog为true时就可以成功跳转到Index路由了）
第三个if其他情况中断跳转（特指想跳转去Index但是store里的isLog为false的情况）
4.实际操作一下
在Home先点击"去About"能够跳转到About
在Home先点击"去Index",不能跳转这里就不贴图了跳转（目前的isLog为默认值false跳转会被next(false)中断）
然后我们点击登录按钮并对弹窗点击确定
点击登录后mutations里的login函数会将isLon的值改为true，从而满足了第二个if判断的条件。
同时Home.vue会变成这样
然后我们再点击"去Index"，就可以跳转了，跳转过来是这样的
此时我们可以退回Home.vue在弹窗中点击取消再次更改isLog的值来取消访问权限，其实因为这里的isLog是保存在vuex里的只要页面刷新isLog的值就会恢复默认的false,实际需求中大家可以将isLog的值保存在sessionStorage或者localStorage中。