vue3中watch监听路由变化

在Vue3中，你可以使用`watch`来监听路由的变化。具体来说，你可以监听`router.currentRoute.value.path`来获取当前路由的路径，或者监听`router.currentRoute.value.name`来获取当前路由的名称。在监听过程中，你可以定义回调函数来处理路由变化时的逻辑操作。例如:

import { useRouter, watch } from 'vue-router'

const router = useRouter()

// 监听当前路由的路径变化
watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    console.log('路由路径变化：', newValue)
    // 执行其他操作
  },
  { immediate: true }
)

// 监听当前路由的名称变化
watch(
  () => router.currentRoute.value.name,
  (newRouterName, oldRouterName) => {
    console.log('路由名称变化：', newRouterName)
    // 执行其他操作
  },
  { immediate: true }
)

在以上代码中，我们使用`watch`函数来监听`router.currentRoute.value.path`和`router.currentRoute.value.name`的变化，并在回调函数中处理相应的逻辑。使用`immediate: true`可以使回调函数在页面首次加载时立即执行。