vue3中使用watch 监听路由

在 Vue 3 中，如果你想监听路由的变化并采取相应的操作，你可以使用 `useRoute` 或者直接在组件内通过 `router` 对象来监听路由变化。Vue Router 提供了内置的 `$route` 变量，这个变量在每个组件实例中都是可用的。

首先，你需要安装 `vue-router` 并引入它：

npm install vue-router

然后，在组件的 setup 钩子函数里，你可以这样使用 `watch` 来监听路由的变化：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    // 使用 watch 函数，当路由发生变化时，回调函数会被调用
    const routeChanged = watch(router.$route, (newRoute) => {
      console.log('路由已改变', newRoute)
      // 这里可以添加你的处理逻辑，比如更新数据、切换视图等
    })

    return {
      router,
      onRouteChange: () => {
        // 如果你想在每次导航完成后立即触发回调，可以在这里添加额外的逻辑
      },
      stopWatchingRouteChanges: () => {
        // 当不再需要监听路由变化时，可以手动停止 watch
        routeChanged()
      }
    }
  }
}

在这个例子中，`onRouteChange` 是可选的，用于在导航结束后添加额外的操作。`stopWatchingRouteChanges` 是一个清理函数，当你不需要再监听路由变化时，可以调用它来结束监听。