首页vue3监听路由页面切换

vue3监听路由页面切换

时间: 2024-12-09 09:13:46 浏览: 165

在Vue 3中监听路由页面切换，你可以通过Vue Router提供的`$router`实例来实现。以下是在`App.vue`或其他全局组件中监听路由变化的一个常见做法： ```javascript <template>  </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter(); // 创建一个ref来存储当前id（假设路由参数名为'id'） const currentId = ref(null); // 使用watch监听$router的变化 watch(() => router.currentRoute, (newRoute) => { // 当路由改变时，获取新的查询参数（如果有的话） const newParams = newRoute.query; // 更新currentId并调用相关的方法（如getDetail） currentId.value = newParams.id; getDetail(newParams.id); }); // 假设getDetail是个方法，接收新的id作为参数 function getDetail(id) { // ... } </script> ``` 在这个例子中，每当路由发生变化，`currentId`就会更新，并调用`getDetail()`方法。这样就实现了对路由参数变化的实时响应。

阅读全文