vue-router钩子函数和执行顺序

最新推荐文章于 2024-05-25 23:48:03 发布

大黑熊dd

最新推荐文章于 2024-05-25 23:48:03 发布

阅读量1.5k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_55716862/article/details/116405163

版权

本文详细介绍了Vue Router的四种路由钩子：全局钩子、组件内钩子、路由独享钩子及其作用。这些钩子主要用于拦截和管理导航，例如权限校验、页面跳转控制等。同时，文章提到了Vue Router的两种模式：hash模式和history模式，并阐述了钩子的执行顺序。通过对路由钩子的深入理解，开发者能更好地控制和优化应用的导航流程。

摘要由CSDN通过智能技术生成

vue路由钩子大致可以分为三类:

1.全局钩子
主要包括beforeEach和afterEach
beforeEach钩子函数有三个参数：to 即将进入的路由对象 from即将进入的路由对象 next 是否继续进入进入路由 next(false)阻止进入 next()继续进入路由地址
afterEach有两个参数 to from 没有next()函数
这类钩子主要用于全局，一般用来判断权限，以及页面丢失时候需要执行的操作


const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) => {
  // ...
})

2.组件内钩子函数
beforeRouteEnter:进入这个组件路由之前
beforeRouteLeave:离开这个组件路由
beforeRouteUpdate:组件参数更新时触发

const gg = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
  		//进入这个组件路由之前
  },
  beforeRouteUpdate (to, from, next) {
 		//组件参数更新时触发
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
  }

3.路由独享钩子
可以在路由配置上直接定义beforeEnter钩子：

  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

4.钩子的作用
vue-router 提供的导航钩子主要用于拦截导航，让他完成跳转或者取消常用的是登录鉴权

5.vue-router 有两种路由模式
hash模式和history模式
默认是hash模式

5.钩子的执行顺序
1.导航被触发。
2,在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9/导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。（此过程触发组件的生命周期）
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。