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 {
    
    }
	}
})

2. 使用路由守卫onBeforeRouteUpdate监听

import {
    
     useRouter, onBeforeRouteUpdate } from "vue-router";

export default defineComponent({
    
    
	setup() {
    
    
		onBeforeRouteUpdate((to) => {
    
    
		  console.log('to',to);
		}) 
		
		return {
    
    } 
	}
})