vue3 监听路由的变化

在Vue3中，我们可以使用两种方法来监听路由的变化。第一种方法是使用路由守卫onBeforeRouteUpdate，代码如下：

import { useRouter, onBeforeRouteUpdate } from 'vue-router';
let router = useRouter()
onBeforeRouteUpdate((to) => {
  // 进行数据更新等操作
});

第二种方法是使用watch监听路由的变化，代码如下：

import { useRouter } from 'vue-router';
const router = useRouter()
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  // 进行数据更新等操作
}, { immediate: true, deep: true })

另外，我们还可以使用setup函数来监听路由的变化，代码如下：

import { useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter()
    watch(() => router.currentRoute.value, (newValue) => {
      // 进行数据更新等操作
    }, { immediate: true })
  }
}