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

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

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

router.beforeEach(() => {

  console.log('beforeEach执行了....')

})

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

当我们把代码稍作修改

router.beforeEach((to, from, next) => {

  console.log('beforeEach执行了....')

  next()

})

得到的效果

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

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()

}

螺钉课堂视频课程地址：http://edu.nodeing.com

巴特西

vue全家桶（2.7）

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

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

最新文章

热门文章