vue携带参数跳转页面(欢迎提问)

最新推荐文章于 2025-03-19 10:24:43 发布

herbsama

最新推荐文章于 2025-03-19 10:24:43 发布

阅读量483

点赞数 1

分类专栏： vue学习小tip 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/herbsama/article/details/120533236

版权

4 篇文章

订阅专栏

本文介绍了在Vue中如何更便捷地实现携带参数的页面跳转，对比了两种方法：原始方法和优化后的2.0版本。优化后的方法通过在`$router.push`中使用对象形式传递参数，简化了路由配置和参数接收的过程，提高了代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请直奔2.0，下面是第一次尝试，虽然成功了，但是不如更新的方便

（）
scope.row.staffId是表单元素

//按钮代码
<el-button @click="gotoupdate1(scope.row.staffId)" 
	type="primary"
 	style="margin:10px 20px;">跳转
</el-button>

//对应方法gotoupdate1
gotoupdate1 (id) {
      this.$router.push('/update1/catchquery/' + id)
    }

2、index.js加上路由注意path格式

{
      path: '/update1/catchquery/:id',
      name: 'catchquery',
      component: catchquery
}

3、接收参数id,query就是按钮界面的id

created () {
   this.query = this.$route.params.id
},

1、携带参数

//按钮代码
<el-button @click="gotoupdate1(scope.row.staffId)" 
	type="primary"
 	style="margin:10px 20px;">跳转
</el-button>

跳转按钮对应的方法

// 进入更新1界面
    gotoupdate1 (staffMessage) {
      this.$router.push({path: '/update1/catchquery', query: { qry: staffMessage }})
    },

2、路由路径

{
      path: '/update1/catchquery',
      name: 'catchquery',
      component: catchquery
}

3、接收参数

this.te = this.$route.query.qry

有什么疑问欢迎提问，本人也是菜鸟