介绍
一、全局路由守卫
所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫，
vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。
全局前置守卫
router.beforeEach((to, from, next) => {//前置守卫
console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数（如果在走完逻辑后不加则不会跳转任何页面）
}
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。
全局后置守卫
router.afterEach（to，from） = {}//后置守卫
next()：回调函数参数配置 next(false)
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
next('/')
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项，
next('error') //跳转错误路由
二、组件路由守卫
// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
next(vm => {})
}
beforeRouteUpdate (to, from, next) {
// 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
三、路由独享守卫
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
全局前置守卫和全局后置守卫的使用
beforeEach：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'home',
component: HomePage
},
{
path:'*',
redirect:'/home'
}
],
})
//全局前置守卫
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
next();
})
export default router;
和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.
router.afterEach((to,from)=>{ //这里不接收next
console.log(to);
console.log(from);
})
本文以上转自脚本之家 www.jb51.net/article/181…
前置守卫权限拦截
用户权限也就是在用户访问网站页面的时候判断是否有权限访问，当然也有判断是否已经登录因为用户可以通过输入网站地址来访问而并不是每次都在登录页面进入，以下代码为判断用户是否登录；
第一步你需要在路由元字段中加上验证字段，这里的是我自己定义的也可以按照官网的说明使用requiresAuth（调用时true为需要验证，false为不需要验证）
然后配置前置守卫
（你可以测试一下，当你点击登录的时候在本地加入一个数据，然后跳页到指定页面后再删掉，然后刷新，守卫就会直接跳到登录页）
