vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
背景: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
}
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)