关于Vue中this.$router.push()传参问题（1）

最新推荐文章于 2022-09-15 22:01:49 发布
最新推荐文章于 2022-09-15 22:01:49 发布
阅读量846 收藏
点赞数 1
分类专栏： 总结 文章标签： javascript vue.js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44093204/article/details/104837826
版权

在父组件里传送

this.$router.push({
 path: '/postView',//子组件路径 
 query: { id: row.id, bbsTopicId: row.bbsTopicId }  //需要传的参数
 })

在子组件里接收

this.$route.query.id   //获取到id
this.$route.query.bbsTopicId  //获取到bbsTopicId

注：可以通过console.log(this.$route.query)查看具体有那些值传过来

_yangyi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue.js this.$router.push获取不到params参数问题
11-20
主要通过两种方式传参 1.query方式传参和接受参数 this.$router.push({ path:'/xxx' query:{ idname:id } }) 接收的方式：this.$route.query.id 2.params方式传递参数 this.$router.push({ name:'路径名称' query:{ idname:id } }) 接收的方式：this.$route.params.id 代码 this.$router.push({ path: '/container', params: { url: this.func.u
vue路由跳转传递参数方式
豆。的博客
02-18 266
一、直接在路由中写参数（刷新页面参数不会丢失） //路由配置文件 //需要配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push({ path: `/detail/${id}`, }) //跳转后页面 获取参数 this.$route.params.id 二、通过query属性传值（刷新页面参数不会丢失） //路由配置文件 { path: '
vue中this.$router.push()路由传值和获取的两种常见方法
Vivien_CC的博客
09-15 3万+
传递的参数是对象或数组今天接到了比较大的需求，由于这个公司的接口调用方法和上一段实习那家公司的写法很不一样，我花了很多时间在摸索，“踏出第一步总是最困难的”，果然没错，第一个很费劲，但完成之后有了思路，下面的任务也就完成得更顺利了一些。简单记录一下吧！1.首先要配置一下接口【api.js】2.在使用的地方先引入方法【跳转到的页面】3.调用的时候要注意是传什么类型的参数，不然请求不回想要的数据【切记切记看一下接口文档】4.配置跳转路由，并传出参数（注意类型）
VueRouter: this.$route.push跳转,携带参数
天涯芳草
04-26 3万+
this.$router.push传递参数有2种方式： 传递参数-- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值-- this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 传递参数-- this.$router.push({name: ' 路由的name ', params: {key: value}}) 参数取值-- this.$route.params...
Vue中this.$router.push（参数） 实现页面跳转
热门推荐
吴冬雪的博客
05-22 13万+
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用。页面通过path/name和query传递参数，该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url，完成跳转。
this.$router.push路由传值，以及获取值的方法
Eat_sugar的博客
06-28 1480
在vue项目中会遇到把当前页的某个数据传给需要跳转到的页面，比如在table表中，我只要其中这一条的数据，然后点击跳转后，在跳转的页面获取到我点击的这一条数据，那么要使用this.router.push()的方法有两种方式，1.第一种是name，和paramsthis.router.push()的方法 有两种方式， 1.第一种是name，和params this.router.push()的方法有两种方式，1.第一种是name，和paramsthis.router.push({ name: ‘/modify
vue中this.$router.push路由传参以及获取方法
qq_39355295的博客
03-28 316
项目中通过this.$router.push路由跳转页面传递参数的方式很常见，一般有两种方式： 1.params传参： this.$router.push({name:'parasetEdit',params:{pk_refinfo:'test',value:'test1'}}); 目标页面接收参数： this.$route.params.pk_refinfo 2.query传参： this.$...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
前端探险家的博客
08-24 3879
this.$router.push进行编程式路由跳转传参router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 { path: '/homeDetails/:id',//要传递的参数前面加： name:'homeDetails' component: () =>import ('@/views/home/homeDetails.vue'), //子路由的绝对路径 }, 组件home点击传参 // 例如表格中点击表名称跳转新页
vue中this.$router.push()路由传参和获取值的方法
m0_58565372的博客
06-21 1007
1.params传参 获取值 2.query传参 获取值 1、两种方式的区别是query传参的参数会带在url后边展示在地址栏 (/assetDetail?id=31)，params传参的参数不会展示到地址栏。 2、由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。...
vue router 传参获取不到的解决方式
10-15
今天小编就为大家分享一篇vue router 传参获取不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue $router和$route的区别详解
01-22
this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档 route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。 打印this.$route和this.$router。 路由传参的方式 1....
详解新手使用vue-router传参时注意事项
12-09
this.$router.push({name: 'details', params: {'id': 233}}) 路由配置 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { ...
vue项目使用$router.go(-1)返回时刷新原来的界面
line
11-18 4万+
在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。 问题如下： 界面1 ： 界面2使用$router.go(-1)返回上一次的界面 由于使用$router.go(-1)返回，导致之前的数据都保留，并未刷新原来的界面，如下：还是显示跳转前的弹框 解决方法1： 不要使用...
vue-router路由传参的几种方式-案例
JackieDYH的博客
08-25 3939
说明 点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据 刷新页面参数丢失 编程式导航 方法一：通过 params 传参 路由配置如下 { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { this.$router..
vue 页面跳转 传递数组
Hero_rong的博客
12-14 1万+
传参： this.$router.push({path: 'release', query: {name: this.benefitsArr}}); //这是关键代码 接收参数： this.$route.query.name; //这是关键代码 需要注意的是 传参是this.$router, 接收参数是this.$route, 这里千万要看清了！！！ ...
Vue中用this.$router传递参数与取值
weixin_44090040的博客
08-06 6061
第一种方式 传递参数 this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值 this.$route.query.key 传递参数 <!-- * @Descripttion: 登录页面 * @version: * @Author: zhangfan * @email: [email protected] * @Date: 2020-07-25 14:47:13 * @LastEditors: zhangf..
vue路由$router.push()的三种传参方式
qq_41206305的博客
11-23 5万+
$ router.push() 的三种传参方式 最近在工作中遇到需要使用$router.push传递一个对象，在这里做一下技术总结 通过path传参 很常用的一种，传递的参数会显示到path中，在刷新页面时数据不会丢失，常用于数据的新增、编辑、查看详情。 this.$router.push(`pushAdd/${id}`) 路由配置 { path: '/pushAdd/:id', component: () => import('@/v
javaScript实现版本号排序
yangyi
03-13 1506
在做项目时遇到的问题，顺便记在这里方便下次查看 var arr = ['1.1.1', '2.301.3', '0.0.1', '1.0.3', '4.4.1', '4.4.1.5']; arr.sort ( function (a,b) { return a>b?-1:1; }); console.log(arr); ...
this.$router.push query传参
最新发布
01-12
this.$router.push方法是Vue Router提供的一种导航方法，用于在Vue.js应用程序中进行页面导航。通过使用query参数，可以在路由之间传递参数。 以下是一个示例，演示了如何使用this.$router.push方法传递query参数：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值