- vue3 如何监听路由变化
在 Vue 3 中，监听路由变化的方式与 Vue 2 有所不同，主要是因为 Vue 3 引入了 Composition API，这使得我们可以以更直观的方式来组织代码。下面详细介绍几种监听路由变化的方法：
1.1. 方法一：使用 watch 函数监听 $route 对象
在 Vue 3 中，可以使用 watch 函数来监听 $route 对象的变化，从而实现实时获取路由变化。这种方式适用于在组件内部监听路由变化，并执行相应操作。
import { watch } from 'vue';
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();// 监听路由变化watch(() => route,(newRoute, oldRoute) => {console.log('Route changed:', newRoute, oldRoute);// 在这里可以执行路由变化时需要做的任何逻辑},{ deep: true, immediate: true });// 返回需要使用的响应式数据和其他函数}
};
这里的 deep 参数表示深观察，因为 route 对象是一个嵌套的对象，所以需要启用深观察才能捕捉到其内部属性的变化。
immediate 参数表示是否立即执行监听器。
1.2. 方法二：使用 onBeforeRouteUpdate 导航守卫
Vue Router 也为开发者提供了一个名为 onBeforeRouteUpdate 的生命周期钩子，可以在当前路由改变复用组件时调用。这意味着当路由改变但是它所对应的组件被重用时，会触发此钩子。
import { onBeforeRouteUpdate } from 'vue-router';export default {setup() {onBeforeRouteUpdate((to, from) => {console.log(`Route is about to change from ${from} to ${to}`);// 在这里可以执行路由变化前需要做的任何逻辑});}
};
1.3. 方法三：监听 router.currentRoute.value.path
另一种方法是直接监听 router.currentRoute.value.path，这种方法同样可以达到监听路由变化的目的。
import { watch } from 'vue';
import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();// 监听当前路由路径的变化watch(() => router.currentRoute.value.path,(newPath, oldPath) => {console.log(`Current path changed from ${oldPath} to ${newPath}`);},{ immediate: true });}
};
以上三种方法都可以有效地帮助你在 Vue 3 中监听路由的变化，并根据变化执行特定的操作。
如果只需要在当前组件内监听路由变化，推荐使用 watch 函数；如果需要在路由变化前做某些处理，则 onBeforeRouteUpdate 是更好的选择。