vue-router有几种钩子函数?具体是什么及执行流程是怎样的?

x33g5p2x  于2022-03-28 转载在 其他  
字(1.3k)|赞(0)|评价(0)|浏览(334)

一、写在前面
之前对于vue-router的路由导航守卫不是很清楚,今天总结一下,并且总结一下执行的顺序。
二、vue-router
2.1、全局守卫——beforeEach

  1. router.beforeEach((to, from, next) => {
  2. console.log(to)
  3. console.log(from)
  4. next()
  5. })

beforeEach在每一次导航之前都会触发,此时的to指的是将要跳转到的路由地址,from指的是从哪一个路由地址跳转的,next表示跳转方法。
2.2、全局导航守卫——beforeResolve

  1. router.beforeResolve((to, from, next) => {
  2. console.log(to)
  3. console.log(from)
  4. next()
  5. })

router.beforeResolve是全局导航守卫,类似于beforeEach
2.3、全局导航守卫——afterEach()

  1. router.afterEach((to, from) => {
  2. console.log(to)
  3. console.log(from)
  4. })

afterEach表示导航之后,此时回调函数中只存在两个参数,一个是to,另一个是from
2.4、路由导航守卫

  1. {
  2. path: "/about",
  3. component: About,
  4. beforeEnter: (to, from, next) => {
  5. console.log(to)
  6. console.log(from)
  7. next()
  8. }

该路由守卫放在路由对象上,参数包括,to,from,next
2.5、组件导航守卫——beforeRouteEnter

  1. <script>
  2. export default {
  3. name: "About",
  4. beforeRouteEnter(to, from, next) {
  5. console.log(to);
  6. console.log(from);
  7. next();
  8. },
  9. };
  10. </script>

可以在组件的options api中设置相关的方法,其中存在三个参数,to, from,next,因为在进入组件之前,所以此时的this为undefined
2.6、组件导航守卫——beforeRouteUpdate

  1. export default {
  2. name: "About",
  3. beforeRouteUpdate(to, from) {
  4. console.log("🚀🚀~ beforeRouteUpdate");
  5. },
  6. };

当前路由改变,但是该组件仍然被复用是触发,并且此时可以访问其中的this
2.7、组件导航守卫——beforeRouteLeave

  1. <script>
  2. export default {
  3. name: "About",
  4. beforeRouteLeave (to, from, next) {
  5. console.log(to)
  6. console.log(from)
  7. console.log(this)
  8. next()
  9. }
  10. };
  11. </script>

beforeRouteLeave可以传入三个参数,一个是to,另一个是from,第三个是next,并且在其中可以访问到this

相关文章