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 是一个清理函数，当你不需要再监听路由变化时，可以调用它来结束监听。