在Vue 3中，路由传参主要通过vue-router实现。以下是两种常见的路由传参方式：
使用路由的params属性进行传递。这适用于需要在URL中始终可见的参数。
// 定义路由时指定参数
const routes = [
{ path: '/user/:id', component: User }
]
// 导航到一个路由，并传递参数
this.$router.push({ name: 'User', params: { id: 123 }})
// 在User组件中接收参数
export default {
props: ['id'],
mounted() {
console.log('User ID:', this.id)
}
}
使用路由的query属性进行传递。这适用于不需要在URL中可见，但需要在路由间共享的参数。
// 导航到一个路由，并传递查询参数
this.$router.push({ path: '/search', query: { keyword: 'Vue3' }})
// 在Search组件中接收参数
export default {
mounted() {
console.log('Search Keyword:', this.$route.query.keyword)
}
}
在路由定义时，可以通过:paramName语法来定义参数，然后在组件中通过this.$route.params.paramName来获取。对于查询参数，可以通过this.$route.query.queryName来获取。
