vue+typescript+router监听路由变化

keyword:ts、路由监听、router、beforeRouterEnter、beforeRouterLeave

在js中需要监听路由的变化时，我们可以通过全局路由守卫、组件内的beforeRouterEnter、beforeRouterLeaver等来监听路由的变化。那么当我们在ts中是如何做到的呢，起初我也是用了这几个方法、但是发现beforeRouterLeaver等钩子并不支持。

解决方法一

1.Watch监听

import { Component, Vue, Watch } from 'vue-property-decorator'

@Watch('$route')
routechange(to: any, from: any) {
    console.log(to, from)
}

解决方法二

2.beforeRouterEnter
刚刚说到在js中可以用这个钩子监听、实际上ts也可以用的。当然先对钩子进行注册

• 在main.ts中配置

import { Component } from 'vue-property-decorator'
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate',
]);

• 在页面内使用

  public beforeRouteLeave(to: any, from: any, next: any) {
     next()
  }

当然，在注册组件时，你也可以像这样引用；两种我都测试过了，都可监听到.在这里解释下，两者有什么区别哈。
vue-class-component是官方出品、vue-property-decorator是社区出品，是基于vue-class-component开发而成的，拓展出了很多操作符@Prop、@Emit等等。当然你在开发时用了vue-property-decorator，就可不必再从vue-class-componentyin引入vue、Component

import Component from 'vue-class-component'
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate',
]);

通过上面操作，是能监听到路由的变化的。但是一些同学会出现，有时候监听到、有时候又监听不到的情况。那你就要看下是否是异步组件了