首页vue3监听路由变化

vue3监听路由变化

时间: 2025-03-26 07:17:45 浏览: 38

### Vue3 中监听路由变化在 Vue3 中，可以通过 `watch` 函数来监听路由的变化。具体实现方式如下： #### 使用 Composition API 和 `useRouter` 通过引入 `useRouter` 来获取路由器实例，并利用 `watch` 方法监控 `currentRoute` 的变化。 ```javascript import { watch } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter(); // 监听当前路由的 name 变化 watch( () => router.currentRoute.value.name, (newRouterName) => { console.log('新的路由名称:', newRouterName); }, { immediate: true } )[^1]; ``` 这段代码展示了如何仅监听路由名称 (`name`) 的变化并打印新值到控制台。设置 `{ immediate: true }` 参数使得监听器会在组件初始化时立即执行一次回调函数。对于更复杂的场景，比如想要监听路径 (`path`) 或者其他属性的变化，则可以调整第一个参数中的访问器函数指向不同的属性: ```javascript watch( () => router.currentRoute.value.path, (newPath) => { console.log('新的路径:', newPath); }, { immediate: true, deep: true } )[^2]; ``` 这里不仅设置了即时触发选项(`immediate: true`)还启用了深度监听(`deep: true`)以确保能够捕捉到对象内部属性的变化。如果项目结构允许使用 `<script setup>` 语法糖形式编写逻辑部分，上述例子可以直接放在该标签内而无需额外声明导入语句。

阅读全文