全局路由可以正常使用。这里说明的是组件内路由钩子
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>