vue this.$router.push()传参

最新推荐文章于 2025-03-04 12:00:00 发布
最新推荐文章于 2025-03-04 12:00:00 发布
阅读量247 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zengkai/p/10142513.html
本文详细介绍了Vue.js中两种路由传参方式：params与query的区别。params传参仅能通过name引用路由，适用于类似POST请求场景；query传参则类似于GET请求，参数会在URL中显示。文章还强调了在进行传参时，应使用this.$router，而在接收参数时，则需调用this.$route。

第一种  params 传参

patams传参，路径不能使用path

this.$router.push({name: 'index', params: {type: 1}})

获取数据：this.$route.params.type

第二种 query

this.$router.push({path: '/user/index', query: {type: 1}})

获取数据： 取数据：this.$route.query.type

注意:

　　params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

转载于:https://www.cnblogs.com/zengkai/p/10142513.html

Vue中给当前页面传递参数并重新加载，vue使用this.$router.push跳转页面，给跳转过去的页面传参不一致时重新加载
G佳伟
03-15 1955
使用 watch 监听 $route 对象的变化，当路由发生变化时重新加载数据或执行其他操作。 利用路由参数来传递参数，并响应参数变化重新加载页面数据。 下面是一个示例代码，演示了如何在Vue中给当前页面传参并重新加载：
Vue2六、路由：声明式导航router-link，编程式导航 this.$router.push，查询参数，动态路由传参，(5+2步骤)，重定向，路由404，路由模式，组件缓存 keep-alive
CC__xy的博客
12-23 565
路由和VueRouter 的使用（5个基础+2个核心步骤）路由重定向redirect，路由404，路由模式hash 和 history，声明式导航：router-link替换a标签做跳转，查询参数传参，动态路由参数传参（？可选参数），编程式导航：路径跳转，命名跳转，组件缓存 keep-alive以及触发的两个生命周期钩子activated和deactivated，生命周期都有完整面试题，返回$router.back（）
vue this.$router.push query传递对象方法
alokka的博客
09-13 3376
this.$router.push({ path: '/home', query: { params: JSON.stringify({ name: 'lokka', age: 18 }) } }); let params = JSON.parse(this.$route.query.params) this.name = params.name; this.age = params.age;
vue中this.$router.push()路由传值
发渐稀的博客
06-29 1万+
部门列表页首先需要拿到包裹在路由中传过来的数据，对于本范例而言，就是需要拿到数据中的公司编号，然后在created() 生命周期函数中调用对应方法中的接口，把公司编号作为参数传给后端，然后后端根据公司编号在数据库表中去查询数据，最后把数据打包返回给前端，前端的部门列表页接收数据之后，再把数据展示到公司的部门列表页中。先来描述一下这东西能干什么？而接口文件，则是为了保证，跳转到指定页面后数据的正常显示，一般情况下，这种自身带有参数的跳转，目标页面会接受其所传的参数，然后打包传给后端去查询数据，最后把。
vue中this.$router.push()路由传值和获取的两种常见方法
Vivien_CC的博客
09-15 3万+
传递的参数是对象或数组今天接到了比较大的需求，由于这个公司的接口调用方法和上一段实习那家公司的写法很不一样，我花了很多时间在摸索，“踏出第一步总是最困难的”，果然没错，第一个很费劲，但完成之后有了思路，下面的任务也就完成得更顺利了一些。简单记录一下吧！1.首先要配置一下接口【api.js】2.在使用的地方先引入方法【跳转到的页面】3.调用的时候要注意是传什么类型的参数，不然请求不回想要的数据【切记切记看一下接口文档】4.配置跳转路由，并传出参数（注意类型）
【Vue】Router 之 router.push 和 router.resolve 页面跳转区别
学习 记录 总结 分享
04-27 6666
打开可以新窗口打开router.resolve 只支持query，若需地址栏参数不可见，需结合localStorage或第三方插件保存。
vue.js this.$router.push获取不到params参数问题
11-20
`this.$router` 是Vue Router提供的一个实例，用于处理页面的导航。在这个问题中，开发者遇到了使用`this.$router.push`传递`params`参数时无法在目标页面获取到的情况。本文将详细解释这个问题，并给出正确的解决...
this.$router.push两种传参方式的区别
seimeii的博客
11-08 1291
首先简单来说明一下 $router 和 $route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 第一种 params传参 只能由name引入 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age
Vue中 this.$router.push 传参
02-19
### Vue.js 使用 `$router.push` 传参的方法 在 Vue.js 中，可以利用 `this.$router.push()` 方法来实现页面间的导航以及参数传递。当通过路径(path)方式进行跳转时，可以通过设置对象中的 `query` 属性来进行查询...
Vue中this.$router.push传参方式
s_156的博客
03-30 3175
1.params传参： var id = this.tableDate[index].id; this.$router.push({name:'testResult',params:{id:id}}); //目标页面接受参数 let id = this.$route.params.id 路由动态传参： //路由 { path: '/pay/:sellerId', component: alliance, meta: { title: '向商户付款',wechat_auth: true,
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
this.$router.push()两种常见用法
热门推荐
qq_42552857的博客
07-12 13万+
1、路由传值 this.$router.push() （1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL （2）当点击 <router-link> 时，这个方法会在内部调用，即点击 <router-link :to="..."> 等同于调用 router.push(...) 　　a) 声明式：<router-link :to="..."> ...
Vue路由跳转
weixin_45637035的博客
04-10 376
一.声明式导航router-link 1.1不带参数： // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 1.2带参数： <router-link :to="{name:'home', params: {id:1}}">
vue router 动态路由
Gomeer的博客
12-19 691
何为动态路由？能够提供参数的路由即为动态路由 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。 例如： 图书商品：   /goods?type=book    汽车商品：   /goods?type=car      美食商品：   /goods?type=food 路由地址相同，都是...
Vue Router参数传递
最新发布
zl979899的博客
03-04 400
两种传参方式 1. $router：路由操作对象，只写入对象 //操作路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) 2. $route：路由信息对象，只读取对象 //读取 路由参数接收 this.name = this.$route.params.name; this.age = this.$route.params.age; 3. 第一种：qu
vue通过$router.push传参数
MPFLY的博客
11-28 1万+
vue通过$router.push传参数 下面通过A页面向B页面传值来举个例子: //A页面: this.$router.push({ name: '页面B', params: { data: '我是要传递的参数' } }) //B页面拿到传来的值: this.data = this.$route.params.data // 拿到上个页面传来的数据 代码很简单, 一下是...
this.$router.push用query传参对象时需注意的地方
WuqibuHuan的博客
04-26 1606
在vue项目中，我们用函数式编程this.$router.push跳转，用query传递一个对象时要把这个对象先转化为字符串，然后在接收的时候要转化为对象，要不然会接收不到参数。要不就把参数分开传递，不要放到对象里。 this.$router.push({ path: '/liveing', query: { routeParams: JSON.stringify({ liveUrl: url, flag: 2 }) } }); 接收： let routeParam
vue路由传值
weixin_44707050的博客
11-10 734
方法一：this.$router.push传query , params this.$router.push('after') this.$router.push({ path: "after", query: { userid: 111, }, }); this.$router.push({ name: "after", params
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值