vue3 监听路由变化

东明兄 2021-01-15
0条评论 427 次浏览
东明兄 2021-01-150条评论 427 次浏览

当从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
        }
      }
    )

发表评论

您的电子邮箱地址不会被公开。