本例将通过一个简略的登录后取得路由跳转权限的案例来简略解释路由守卫（全局前置守卫）
案例场景：在许多业务中咱们会遇到用户登录后能力拜访某个路由的状况(不能通过地址栏手动跳转)，这事咱们可能须要用到路由守卫。

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中，写出登录扭转拜访路由权限的函数，当用户点击“登录按钮”时会触发该函数

<div class="home">    <h1>这里是Home，登录后能力跳转到Index</h1>    <router-link to="/a">去About</router-link><br>    <router-link to="/i">去Index</router-link><br>    <button @click="Login">登录按钮</button>    <h2>{{logMsg}}</h2>  </div>

这里的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中。