vue3监听路由变化

1.onBeforeRouteUpdate路由守卫

import { useRouter, onBeforeRouteUpdate } from 'vue-router'
 
let route = useRouter()
onBeforeRouteUpdate(to=>{
    console.log('to :>> ', to);
})

2.watch监听

import { useRouter, onBeforeRouteUpdate } from 'vue-router'
import { ref, watch, onMounted, toRefs,reactive } from 'vue'
 
let route = useRouter()
let active = ref('')
onBeforeRouteUpdate(to=>{
    console.log('to :>> ', to);
})
watch(()=>route.currentRoute.value.path, (newValue, oldValue) => {
    active.value = newValue
}, { immediate: true })