Vue的路由守卫

对于绝大部分的网站而言，都是有个人主页的，但是你如果没登陆的话，还能访问个人主页吗？ 从逻辑上来讲，那肯定是不行的。 所以，要怎么阻止没登录状态下去访问个人主页呢？ 就是利用路由守卫，对路由实现权限控制。

而在Vue中，路由守卫分为三种：全局路由守卫、独享路由守卫 和 组件内路由守卫

全局路由守卫

顾名思义，全局路由守卫就是对所有的路由都能进行权限控制。 全局路由又分为 全局前置守卫 和 全局后置守卫。

全局前置守卫

全局前置守卫，会在组件初始化时调用，每次路由切换之前都会调用。 即 此时处于A页面，想跳转到B页面时，会先通过全局前置守卫进行判断，如果通过了，那就会跳转，否则就阻止跳转。

//全局前置守卫
router.beforeEach((to,from,next) =>{//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})

全局后置守卫

全局后置守卫，在组件初始化时调用，以及每次路由切换之后调用。 即，此时处于A页面，要跳转到B页面，在跳转完毕后会执行其中的回调。 所以，一般可以用来路由跳转后的相应页面操作。

router.afterEach((to,from) =>{//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
}

所以，我们就可以把鉴权的操作写在前置守卫中，而后置守卫可以用于简单的欢迎语弹窗。

//全局前置守卫：初始化时执⾏、每次路由切换前执⾏
router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进⾏权限控制if(localStorage.getItem('username') === 'Eric'){ //权限控制的具体规则next() //放⾏ }else{alert('暂⽆权限查看') }}else{ // 当前路由不需要权限控制next() //放⾏ }
})//全局后置守卫：初始化时执⾏、每次路由切换后执⾏
router.afterEach((to,from) => {console.log('afterEach',to,from)if(to.meta.title){document.title = to.meta.title //修改⽹页的title}else{document.title = 'vue_test'}
})

独享路由守卫

独享路由守卫，是在进入组件时被调用，区别在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫，而其作用域也仅限于该路由。

beforeEnter(to,from,next){//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}

效果其实差不多，但全局路由守卫针对所有路由组件，独享路由守卫只服务于被配置的那个路由组件

组件内守卫

当使用路由规则 进入 或者 离开 该组件时，会触发组件内守卫的调用， 组件内守卫 的作用域也仅限于该组件。

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}

它的区别之处就在于 beforeRouteLeave，离开守卫。 它是在要切换出这个组件后被调用，也就是离开组件后调用。 实际中，我们可以利用它来完成某一些的操作，比如 我们切换出该组件时，暂停该组件的一些运行，等我们在切换回这个组件时，再开启运行。