vue全家桶（2.7）

3.11.1.vue-router中的全局钩子函数

在vue-router中，路由发生变化，我们可以做一些事情，例如：可以决定是否进入导航，可以决定跳转到哪里，官方文档中又叫做导航守卫

首先来看一个全局的钩子函数，官方文档中叫做注册一个全局的前置守卫，使用router.beforeEach方法来实现

router.beforeEach(() => {
  console.log('beforeEach执行了....')
})

这里的beforeEach可以理解为在每个导航进入之前挂的一个钩子，会在每个导航进入之前出发，在beforeEach里面就可以做一些事情，例如，阻止进入导航，执行上面的代码，会发现我们点击相应的导航，对应的组件并不能渲染出来了，罪魁祸首就是这个beforeEach

image

当我们把代码稍作修改

router.beforeEach((to, from, next) => {
  console.log('beforeEach执行了....')
  next()
})

得到的效果

image

每个路由钩子函数接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子

这里的next是一个函数，如果不调用next方法，就不会进入下一个钩子，我们就可以用它来实现跳转或者取消

在写具体跳转或者取消案例之前，插播一个前置知识点：路由元信息

路由元信息就是给每条路由记录配置一个meta字段，字段配置好后可以在需要的地方拿出来使用

配置示例：

{
  path: '/',
  components: {
    default: Home,
    a: HomeSider,
    b: HomeMain
  },
  meta: {
    isLogin: true
  }
}

我们可以从钩子函数的参数中拿到meta字段值

router.beforeEach((to, from, next) => {
  console.log('beforeEach执行了....')
  if (to.meta.isLogin) {
    next()
  } else {
    next(false)
  }
})

next函数中传入false就表示不进入导航，我们在meta字段中配置了isLogin，在使用的时候通过to.meta.isLogin 取出来做判断，如果值是true就执行next 如果值是false就执行next(false)

next函数内还可以传入一个路由地址，会自动跳到改地址，我可以把上面代码稍作修改

router.beforeEach((to, from, next) => {
  console.log('beforeEach执行了....')
  if (to.meta.isLogin) {
    next()
  } else {
    next('/login')
  }
})

除了在导航进入之前有一个钩子函数，在导航进入之后也有一个钩子函数，叫做afterEach,使用方法和beforeEach类似, 因为afterEach执行时已经进入到导航了，所以没有第三个参数next

router.afterEach((to, from) => {
  console.log('afterEach执行了....')
  // 判断是否有title字段
  if (to.meta.title) {
    window.document.title = to.meta.title 
  } else {
    window.document.title = '螺钉课堂'
  }
})

#3.11.2.vue-router中写到路由记录里的钩子函数

beforeEnter 在进入导航前被调用，需要在路由记录里面配置

{
  path: '/course',
  component: Course,
  meta: {
    isLogin: false,
    title: '课程|螺钉课堂'
  },
  beforeEnter (to, from, next) {
    console.log('beforeEnter被执行了')
  }
},

#11.3.vue-router中写在组件内部的钩子函数

1.beforeRouteEnter， 在导航进入前被调用，在这个函数里面不能拿到this，因为即将被渲染的组件还没被创建

beforeRouteEnter (to, from, next) {
console.log('user组件中的beforeRouteEnter执行了')
next()
}

2.beforeRouteUpdate,在当前路由改变，但是该组件被复用时调用,举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 this

beforeRouteUpdate (to, from, next) {
  console.log('user组件中的beforeRouteUpdate执行了')
  next()
}

3.beforeRouteLeave,导航离开该组件的对应路由时调用,可以访问组件实例 this

beforeRouteLeave (to, from, next) {
  console.log('user组件中的beforeRouteLeave执行了')
  next()
}