背景:vue项目 使用this.$router.push进行路由跳转时,可以通过query或params参数传递和接收参数。
通过query参数传递参数:
// 传递参数 this.$router.push({ path: '/target', query: { id: 1, name: 'John' } }); // 接收参数 this.$route.query.id // 1 this.$route.query.name // 'John'
通过params参数传递参数(用于动态路由):
// 传递参数 this.$router.push({ name: 'target', params: { id: 1, name: 'John' } }); // 接收参数 this.$route.params.id // 1 this.$route.params.name // 'John'
注意事项
query参数通过URL中的查询字符串传递,而params参数通过URL中的路径参数传递。根据你的实际需求和路由配置,选择适合的参数传递方式。
需要注意的是,使用params参数时,要确保目标路由配置中动态路由参数已正确声明。例如:
// 路由配置 { path: '/target/:id', name: 'target', component: TargetComponent }