vue2+ts 路由钩子函数不生效

原文地址

解决方法

方法1：通过 Component.registerHooks 全局注册，用于路由加载的页面组件

// main.js
import Component from 'vue-class-component'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

注册后可以正常使用：

// page.vue
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class page extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: () => void): void {
    console.log(this, 'beforeRouteEnter');
    next();
  }

  beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
    console.log(this, 'beforeRouteUpdate');
    next();
  }

  beforeRouteLeave(to: Route, from: Route, next: () => void): void {
    console.log(this, 'beforeRouteLeave');
    next();
  }
}

TIP

使用路由钩子函数需要保证你的使用钩子函数的组件是通过路由加载的

方法2：普通组件中使用

// header.vue
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  beforeRouteEnter(to: Route, from: Route, next: () => void): void {
    console.log(this, 'beforeRouteEnter');
    next();
  },
  beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
    console.log(this, 'beforeRouteUpdate');
    next();
  },
  beforeRouteLeave(to: Route, from: Route, next: () => void): void {
    console.log(this, 'beforeRouteLeave');
    next();
  },
})

vue2+ts 路由钩子函数不生效 ​

解决方法 ​

vue2+ts 路由钩子函数不生效

解决方法