vue3 watch监听路由改变写法

在Vue 3中，你可以使用`watch`函数来监听路由变化。通常，我们会监听Vue Router的`$route`对象来检测路径的变化。以下是一个示例代码，展示了如何使用Vue 3的Composition API来实现对路由变化的监听：

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

export default {
  setup() {
    const route = useRoute(); // 获取当前路由实例
    const currentPath = ref(route.path); // 使用ref创建响应式的路径数据

    // 监听路由变化
    watch(
      () => route.path, // 监听route.path变化
      (newValue, oldValue) => {
        console.log(`路由从 "${oldValue}" 变化到了 "${newValue}"`);
        // 这里可以执行路由变化后需要的操作，比如获取新的路由参数
      }
    );

    // 你也可以在这里返回需要暴露给模板的数据或方法
    return {
      currentPath,
    };
  },
};

在上面的代码中，我们首先从`vue-router`中引入了`useRoute`函数，用以获取当前的路由对象。然后，我们创建了一个响应式的变量`currentPath`来存储当前的路由路径，并使用`watch`函数监听`route.path`的变化。每当路由路径发生变化时，`watch`的回调函数会被触发，你可以在这个回调函数中执行需要的操作。