vue3 监听路由变化

当从A页面再跳转到A页面时，vue会复用当前页面组件，不走生命周期。可以监听路由来实现 页面数据的变化更新，注意 监听 fullPath 而不是 path ，因为 path 不带参数，仅参数变化时无法监听到。

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

  const route = useRoute()
    watch(
      () => route.fullPath,
      (n, o) => {
        console.log('监听路由')
        console.log('new:' + n + ',old:' + o)
      }
    )

业务上需求是 url 参数发生变化 重新请求数据，通过watch 实现后，发现退出当前页面 watch 的回调也会执行， 可以再根据路由信息做一下判断，仅当前页 路由变化时 更新数据：

   watch(
      () => route.fullPath,
      (n, o) => {
        console.log('监听路由发生变化')
        // 确保路由还在当前页
        if (route.name === '当前路由的name') {
          console.log('监听当前页的路由信息发生变化')
          // update
        }
      }
    )