1. 方法一：使用 watch 函数监听 route 对象的变化，从而实现实时获取路由变化。
   这种方式适用于在组件内部监听路由变化，并执行相应操作。

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    // 监听路由变化
    watch(
      () => route,
      (newRoute, oldRoute) => {
        console.log('Route changed:', newRoute, oldRoute);
        // 在这里可以执行路由变化时需要做的任何逻辑
      },
      { deep: true, immediate: true }
    );

    // 返回需要使用的响应式数据和其他函数
  }
}

这里的 deep 参数表示深观察，因为 route 对象是一个嵌套的对象，所以需要启用深观察才能捕捉到其内部属性的变化。immediate 参数表示是否立即执行监听器。

2. 方法二：使用 onBeforeRouteUpdate 导航守卫
   Vue Router 也为开发者提供了一个名为 onBeforeRouteUpdate 的生命周期钩子，可以在当前路由改变复用组件时调用。这意味着当路由改变但是它所对应的组件被重用时，会触发此钩子。

mport { onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      console.log(`Route is about to change from ${from} to ${to}`);
      // 在这里可以执行路由变化前需要做的任何逻辑
    });
  }
};

3. 方法三：监听 router.currentRoute.value.path
   直接监听 router.currentRoute.value.path，这种方法同样可以达到监听路由变化的目的。

import { watch } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    
    // 监听当前路由路径的变化
    watch(
      () => router.currentRoute.value.path,
      (newPath, oldPath) => {
        console.log(`Current path changed from ${oldPath} to ${newPath}`);
      },
      { immediate: true }
    );
  }
};

如果只需要在当前组件内监听路由变化，推荐使用 watch 函数；如果需要在路由变化前做某些处理，则 onBeforeRouteUpdate 是更好的选择。