Vue-router（5）之 路由的before家族

参看：

Vue导航守卫beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave详解

vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）

路由守卫beforeEach,beforeResolve,afterEach

组件中的beforeRoute函数

// 组件在加载时调用，此时组件实例还没有被加载
  beforeRouteEnter(to, from, next) {
    console.log(this, 'beforeRouteEnter') // undefined
    console.log(to, 'to')
    console.log(from, 'form')
    console.log(next, 'next()')
    next(vm => {
      // 因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm) // 当前组件的实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
    // 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(this, 'beforeRouteUpdate') // 当前组件实例
    console.log(to, 'to')
    console.log(from, 'from')
    console.log(next, 'next()')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log(this, 'beforeRouteLeave') // 当前组件实例
    console.log(to, 'to')
    console.log(from, 'from')
    console.log(next, 'next()')
    next()
  },

全局中的before函数

beforeEach

import Vue from 'vue'
import Router from 'vue-router'

import Son1 from '@/view/New/son1.vue'
import Son2 from '@/view/New/son2.vue'
import Son3 from '@/view/New/son3.vue'

Vue.use(Router)
const VUEROUTER = new Router({
  routes: [
    { path: '/', redirect: '/son1' },
    { path: 'son1', name: "son1", component: Son1 },
    { path: 'son2', name: "son2", component: Son2 },
    { path: 'son3', name: "son3", component: Son3 }
  ]
})

// 为路由对象，添加 导航守卫：
// beforeEach 方法，会在每个路由规则，被匹配之前，做一件事情
VUEROUTER.beforeEach((to, from, next) => {
  console.log('to',to)
  console.log('from', from)
  console.log('next', next)
  next()
})

export default VUEROUTER

通过beforeEach这个方法，可以

1、验证用户是否登录

2、用户权限；

3、用户输入的路路径是否存在，需要重定向到哪个页面

beforeResolve 和 afterEach

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next()
})
router.beforeResolve((to, from, next) => {
  console.log('beforeResolve')
  next()
})
router.afterEach((to, from) => {
  console.log('afterEach')
})

进入一个页面触发的构造函数：

beforeEach => beforeRouteEnter => beforeResolve => afterEach => created => mounted => beforeRouteLeave