Vue -Ts入门 Vue-Router (三)

全局路由可以正常使用。这里说明的是组件内路由钩子

main.js

import router from './router';
import { Component } from 'vue-property-decorator';

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

目标文件

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator';
import { Route } from "vue-router";  // 检测规则

@Component
export default class HelloWorld extends Vue {

  beforeRouteEnter(to: Route, from: Route, next: () => void): void {
    console.log(this, 'beforeRouteEnter'); 
    // 这边是取不到this实例,如果在此调用方法 可以注册一个静态方法 static xxx，HelloWorld.xxx
    // 如果你知道有更好的方法，望告知
    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();
  }
}
</script>