一文详解Vue中实现路由跳转传参的4种方式（十分详尽）

在Vue中实现路由跳转并传递参数有多种方式，下面是四种常见的方法：

1. 使用query参数

// 定义路由
const routes = [
  { path: '/user', component: User }
]
 
// 在组件中
this.$router.push({ path: '/user', query: { id: 123 }})
 
// 在目标组件中获取参数
this.$route.query.id

2. 使用params参数（需要在路由配置中指定props: true）

// 定义路由
const routes = [
  { path: '/user/:id', component: User, props: true }
]
 
// 在组件中
this.$router.push({ name: 'user', params: { id: 123 }})
 
// 在目标组件中获取参数
this.$route.params.id

3. 使用props直接传递一个固定值

// 定义路由
const routes = [
  { path: '/user', component: User, props: { id: 123 } }
]
 
// 在目标组件中获取参数
this.$route.props.id

4. 使用$emit事件传递参数

// 在父组件中
this.$router.push('/user/' + userId)
 
// 在子组件中
created() {
  this.$emit('update:userId', this.$route.params.userId)
}

以上四种方法可以满足大多数路由传参的需求，开发者可以根据实际场景选择合适的方法。