vue3中路由的params传参

在Vue3中使用路由的params传参，可以通过$route对象或者$route.params来获取参数。

1. 在路由配置中定义动态路由

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

2. 在组件中获取参数

import { defineComponent, computed } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  setup() {
    const route = useRoute()
    const id = computed(() => route.params.id)

    return {
      id
    }
  }
})

3. 在模板中使用参数

<template>
  <div>
    <p>User ID: {{ id }}</p>
  </div>
</template>

4. 在代码中编程式跳转路由并传参

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const handleClick = () => {
      router.push({
        name: 'user',
        params: { id: '123' }
      })
    }

    return { handleClick }
  }
}