- 方法一：使用 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 参数表示是否立即执行监听器。
- 方法二：使用 onBeforeRouteUpdate 导航守卫
Vue Router 也为开发者提供了一个名为 onBeforeRouteUpdate 的生命周期钩子，可以在当前路由改变复用组件时调用。这意味着当路由改变但是它所对应的组件被重用时，会触发此钩子。
mport { onBeforeRouteUpdate } from 'vue-router';
export default {
setup() {
onBeforeRouteUpdate((to, from) => {
console.log(`Route is about to change from ${from} to ${to}`);
// 在这里可以执行路由变化前需要做的任何逻辑
});
}
};
- 方法三：监听 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 }
);
}
};
如果只需要在当前组件内监听路由变化，推荐使用 watch 函数；如果需要在路由变化前做某些处理，则 onBeforeRouteUpdate 是更好的选择。
