vue之router钩子函数

た入场券 2023-06-04 02:40 23阅读 0赞

钩子函数可以分为三大类：

一。全局导航钩子函数

**1.router.beforeEach（全局前置守卫）**

**应用场景：可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！！**

它的三个参数：

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）

from: (Route路由对象) 当前导航正要离开的路由

next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) \*\*\***必须调用**

**2. router.afterEach（全局后置守卫）**

**router.afterEach有两个参数：to/from**

**二。路由独享的守卫(路由内钩子)**

**beforeEnter**

**beforeLeave**

const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            // ...
          }
        }
      ]
    这些守卫与全局前置守卫的方法参数是一样的。

三。**组件内的守卫(组件内钩子)**

**beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave**

const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当钩子执行前，组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
    
      }

转载于:https://www.cnblogs.com/jiaqi1719/p/11338434.html