如何在 Vue3 中使用 setup 函数处理路由参数的变化并保持组件状态同步？

在 Vue3 中，你可以通过组合API（Composition API）中的 `setup` 函数以及 `watch` 或者 `ref` 来监听和处理路由参数变化，并保持组件状态同步。以下是基本步骤：

1. 首先，安装路由插件如 `vue-router` 并设置好路由配置。

import { createRouter, createWebHistory } from 'vue-router'
// ...

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
  ]
})

2. 在 `setup` 函数中，引入路由实例 `router`, 并创建一个 `reactive` 的 `routeParams` 变量来存储路由参数。

import { ref, reactive } from 'vue'

setup() {
  const router = ref(router)
  const routeParams = reactive({}) // 初始化空对象

  // 当路由发生变化时，更新 routeParams
  router.value.$on('routeUpdate', (to) => {
    routeParams.value = to.query // 使用query属性获取URL查询参数
  })

  return {
    router,
    routeParams
  }
}

3. 现在可以在模板中直接使用 `routeParams` 获取当前路由参数并处理它们。每当路由参数变化，组件的状态都会自动更新。

<template>
  <div>
    <h1>Route params: {{ routeParams }}</h1>
    <!-- 根据routeParams的内容动态渲染内容 -->
  </div>
</template>

<script>
export default {
  // ...
}
</script>