vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例

简介: vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例

背景: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
}
目录
相关文章
|
1天前
|
JavaScript
vue 下载插件downloadjs
vue 下载插件downloadjs
8 1
|
1天前
|
JavaScript
vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)
vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)
7 1
|
1天前
|
JavaScript
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
6 1
|
1天前
|
JavaScript
Eslint-------error ‘Vue‘ is not defined no-undef
Eslint-------error ‘Vue‘ is not defined no-undef
|
1天前
|
JavaScript
|
16小时前
|
JavaScript 索引
Component name “index“ should always be multi-word vue/multi-word-component-names
Component name “index“ should always be multi-word vue/multi-word-component-names
|
1天前
|
XML JavaScript 前端开发
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
7 1
|
1天前
|
JavaScript
vue实战--v-for 遍历渲染按钮的两种实现方案(重点:按钮点击事件的绑定技巧)
vue实战--v-for 遍历渲染按钮的两种实现方案(重点:按钮点击事件的绑定技巧)
10 1
|
2天前
|
缓存 JavaScript 前端开发
Vue之异步组件【探究 Vue 的异步组件的魔力所在】
Vue之异步组件【探究 Vue 的异步组件的魔力所在】
5 1
|
2天前
|
JavaScript 前端开发 UED
Vue之异步组件【按需加载,动态引入,乃Vue异步组件之精髓也】
Vue之异步组件【按需加载,动态引入,乃Vue异步组件之精髓也】
6 1