vue3动态修改路由meta的值

今天写的vue3项目接到一个需求 要求动态修改路由meta的title值。我一想这不是有手就行。

veu2里面 this.$route.meta.title = '' 直接搞定。vue3应该大差不差。

 import { useRoute } from 'vue-router'
 const route = useRoute()
  onMounted(() => {
     route.meta.title = '测试标题123'
  })

本来以为这样简单的搞完收工，却发现视图居然没有更新！这什么情况？？？

打印发现这就是一个普通的对象 没有做响应式处理页面自然无法渲染刷新。这可咋办呢。

直接改为响应式对象,发现meta是只读属性无法改变引用地址。

然后我就想设置的时候把他变成响应式的poxy对象。

import { reactive } from 'vue'
const router = createRouter({
  history: createWebHistory(),
  [{
    path: `/`,
    name: `Login`,
    component: () => import(`@/views/home/PageHome.vue`), // 注意这里要带上 文件后缀.vue
    meta: reactive({ title: `首页` }),
  }],
})

然而并没有什么卵用。路由表的对象和route返回的对象根本不是同一个。 最后实在没办法了。监听属性值变化吧

  const title = ref()
  watch(
    () => route.name,
    (name: any) => {
      if (route.meta.title) {
        title.value = route.meta.title
        Object.defineProperty(route.meta, `title`, {
          set(newVal) {
            title.value = newVal
          },
        })
      }
    },
    {
      immediate: true,
      deep: true,
    }
  )

就这样了。问题是解决了。但是感觉实现方式太牵强了。各位大佬看看有没有什么更好的方式实现？