ts 监听页面路由变化 --vue

在 Vue.js 中监听页面路由变化，可以使用以下方法：

1. 使用 Vue Router 的 beforeEach 导航守卫

import router from './router';

router.beforeEach((to, from, next) => {
  console.log(`The current URL is ${to.fullPath}`)
  console.log(`The last navigation action is ${from.fullPath}`)
  next();
});

这个方法会在每次路由切换前执行，其中 to 表示即将跳转的路由，from 表示当前路由，next 是一个函数，用于控制路由跳转。在这个方法中可以执行路由变化的回调函数，实现对路由变化的监听。

2. 监听 Vue Router 的 $route 变化

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

@Component
export default class MyComponent extends Vue {
  mounted() {
    // 监听路由变化
    this.$watch('$route', (to, from) => {
      console.log(`The current URL is ${to.fullPath}`)
      console.log(`The last navigation action is ${from.fullPath}`)
    });
  }
}

这个方法会在当前组件挂载后执行，利用 Vue 的 $watch 方法监听 $route 对象的变化，实现对路由变化的监听。

以上两种方法都可以在路由变化时执行回调函数，实现对路由变化的监听。