当做Vue-cli项目的时候感觉在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。
对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。
官方文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
如何设置一个全局守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：就是在你router配置的下方注册
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由-
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖next方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到from路由对应的地址。next('/')或者next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如replace: true、name: 'home'之类的选项以及任何用在router-link的toprop 或router.push中的选项。next(error): (2.4.0+) 如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。
确保要调用 next 方法，否则钩子就不会被 resolved。
一个简单实用的小例子：
const router = new VueRouter({ ... }) //这是路由配置，我就不多说了
const whiteList = ['/error', '/register/regindex', '/register/userauthent', '/register/submit'] // 路由白名单
vueRouter.beforeEach(function(to,from,next){
console.log("进入守卫");
if (userInfo.user_id>0){
console.log("登录成功");
next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
}else{
console.log("登录失败");
getUserInfo.then(res => {
if(res){
if (res.user_id){
if (res.status == 4) {
//账号冻结
next({ path: '/error', replace: true, query: { noGoBack: true } })
}
if (res.status == 3) {
//认证审核中
next({ path: '/register/submit', replace: true, query: { noGoBack: true } })
}
if (res.status != 1 && res.status != 3) {
if (!res.mobile ) {
next({ path: '/register/regindex', replace: true, query: { noGoBack: true }})
} else {
//绑定完手机号了
next({ path: '/register/userauthent', replace: true, query: { noGoBack: true } })
}
}
next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
}else{
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
next(); //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
}else{
next({ path: '/register/regindex', replace: true, query: { noGoBack: true }})
}
}
}else{
}
}
}).catch(()=>{
//跳转失败页面
next({ path: '/error', replace: true, query: { noGoBack: true }})
})
}
});
export default router
温馨提示：有些地方为vuex介入调取方法及数据判断，但由于例子原因就不展示，只提供思路供大家参考。
最后和大家说下如果白名单太多或项目更大时，我们需要把白名单换为vue-router路由元信息:
meta字段（元数据）
直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了
{
path: '/actile',
name: 'Actile',
component: Actile,
meta: {
login_require: false
},
},
{
path: '/goodslist',
name: 'goodslist',
component: Goodslist,
meta: {
login_require: true
},
children:[
{
path: 'online',
component: GoodslistOnline
}
]
}
这里我们只需要判断item下面的meta对象中的login_require是不是true，就可以做一些限制了
router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next('/login')
} else
next()
})
