vue3当前组件监听路由变化
# 1. 使用watch监听
import { defineComponent, watch } from "vue";
import { useRoute } from "vue-router";
export default defineComponent({
setup() {
const route = useRoute();
watch(() => route.path,(newPath, oldPath) => {
console.log(newPath)
},{ immediate: true });
return {}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 2. 使用路由守卫onBeforeRouteUpdate监听
import { useRouter, onBeforeRouteUpdate } from "vue-router";
export default defineComponent({
setup() {
onBeforeRouteUpdate((to) => {
console.log('to',to);
})
return {}
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11