共计 1164 个字符，预计需要花费 3 分钟才能阅读完成。
vue 中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是 router 独享守卫。
一、全局路由守卫
所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都须要通过这个大门的查看
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫
router.beforeEach((to, from, next) => {console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数}
router.afterEach（to，from）= {}
next()：回调函数参数配置
next(false): 中断以后的导航。如果浏览器的 URL 扭转了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
next(’/’) 或者 next({path:‘/’}): 跳转到一个不同的地址。以后的导航被中断，而后进行一个新的导航。你能够向 next 传递任意地位对象，且容许设置诸如 replace: true、name:‘home’之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项
二、组件路由守卫
// 跟 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) => {
// …
}
} ] })
vue-router 提供了导航钩子: 全局前置导航钩子 beforeEach 和全局后置导航钩子 afterEach，他们会在路由行将扭转前和扭转后进行触发。所以判断用户是否登录须要在 beforeEach 导航钩子中进行判断。前端培训
每个守卫办法接管三个参数：
to: Route: 行将要进入的指标 路由对象
from: Route: 以后导航正要来到的路由
next: Function: 肯定要调用该办法来 resolve 这个钩子。
在我的项目中，个别在 beforeEach 这个钩子函数中进行路由跳转的一些信息判断。
判断是否登录，是否拿到对应的路由权限等等。