vue3组合式API实现路传参

在Vue3中，可以使用组合式API实现路由传参。具体实现步骤如下：

1. 在组件中，使用`useRoute`函数获取当前路由信息。例如：

   import { useRoute } from 'vue-router'
   
   export default {
     setup() {
       const route = useRoute()
       // ...
     }
   }

2. 在模板中，直接使用`route.params`属性获取路由传参。例如：

   <template>
     <div>{{ route.params.id }}</div>
   </template>

注意：`route.params`属性是一个响应式对象，当路由参数变化时，模板会自动更新。

3. 如果需要在组件中对路由参数进行监听，可以使用`watch`函数。例如：

   import { useRoute, watch } from 'vue-router'
   
   export default {
     setup() {
       const route = useRoute()
       watch(() => route.params.id, (newValue, oldValue) => {
         // ...
       })
     }
   }

注意：如果使用了`watch`函数，需要手动在组件销毁时停止监听，以避免内存泄漏。可以使用`onUnmounted`函数实现。例如：

   import { useRoute, watch, onUnmounted } from 'vue-router'
   
   export default {
     setup() {
       const route = useRoute()
       const stop = watch(() => route.params.id, (newValue, oldValue) => {
         // ...
       })
       onUnmounted(stop)
     }
   }