直接解构 useRouter().route.params 会丢失响应式，因解构得到的是普通值副本而非 Proxy 代理；正确方式为：①用 useRoute() 直接在模板中 {{ route.params.id }}；②用 toRefs(route.params) 解构后模板可 {{ id }}、逻辑中需 id.value；③避免 const { id } = route.params 等破坏响应式的写法。
因为 useRouter 返回的 route 是一个响应式对象（reactive），直接解构 route.params 会丢失响应式连接，导致后续参数变化时读不到新值，甚至首次渲染就取不到初始值。
route.params 解构后为空的常见写法
错误示例：
-
const { params } = useRouter().route;—— 解构出的是普通对象副本，不响应路由变化 -
const { id } = useRouter().route.params;——id是原始字符串，不是 ref，赋值或读取都不触发更新 - 在
setup()顶层直接解构并返回：return { id }，模板里用{{ id }}，但始终显示undefined
正确获取并保持响应式的三种方式
✅ 推荐优先使用 useRoute（组合式 API 标准做法）：
import { useRoute } from 'vue-router'-
const route = useRoute()—— 返回的是只读响应式对象 - 模板中直接写
{{ route.params.id }}，自动响应参数变更 - 如需在逻辑中监听变化，用
watch(() => route.params.id, ...)
✅ 若必须解构，用 toRefs 包一层：
import { toRefs } from 'vue'const route = useRouter().route-
const { params } = toRefs(route)—— 此时params是 ref，params.value.id可读 - 更常用的是：
const { id } = toRefs(route.params)，然后用id.value读取
✅ 模板中无需 .value？可以，但前提是变量本身是 ref 或来自 toRefs：
- 用
toRefs(route.params)解构后，在模板中可直接写{{ id }}（Vue 自动解包） - 但 JS 逻辑中修改仍需
id.value = 'new-id'（仅限可写的 ref，注意useRoute()返回的是只读）
为什么不能直接解构 route.params？
根本原因在于 Vue 3 的响应式机制：
-
route是由reactive()创建的 Proxy 对象，响应式依赖于访问路径route.params.id触发 get 拦截 - 解构操作
const { id } = route.params相当于执行const id = route.params.id，拿到的是当前时刻的字符串副本 - 这个副本脱离了 Proxy 环境，后续路由跳转时，
id变量不会重新赋值，也不会触发视图更新
不复杂但容易忽略
