this.$router.push两种传参方式的区别

已于 2022-08-10 12:05:01 修改
阅读量1.2k 收藏 3
点赞数 1
分类专栏： vue-router 文章标签： Vue Router params query 路由跳转 路由参数
于 2021-11-08 14:11:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/seimeii/article/details/121206227
版权 
首先简单来说明一下 $router 和  $route的区别

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象

区别

  1. 1、name可以和params、query都可以一起使用；
  2. 2、path只能和query使用；
  3. 3、使用params传参 刷新后不会保存，使用query刷新后可以保存；
  4. 4、params不会在地址栏显示，query会在地址栏显示；
  5. 5、params能和动态路由一起使用，而query不能

第一种 params传参 只能由name引入

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push(
最低0.47元/天 解锁文章
vue.js this.$router.push获取不到params参数问题
11-20
首先，Vue Router提供了两种主要的参数传递方式：`query` 和 `params`。 1. **query方式**： - 使用`path`属性指定路由，并通过`query`属性传递参数。 - 示例：`this.$router.push({ path: '/xxx', query: { id...
vue this.$router.push()传参
不抛弃、不放弃：Aaron莫言
01-18 1083
patams传参，路径不能使用path获取数据：this.$route.params.type获取数据： 取数据：this.$route.query.type。
vue中this.$router.push()路由传值
发渐稀的博客
06-29 1万+
部门列表页首先需要拿到包裹在路由中传过来的数据，对于本范例而言，就是需要拿到数据中的公司编号，然后在created() 生命周期函数中调用对应方法中的接口，把公司编号作为参数传给后端，然后后端根据公司编号在数据库表中去查询数据，最后把数据打包返回给前端，前端的部门列表页接收数据之后，再把数据展示到公司的部门列表页中。先来描述一下这东西能干什么？而接口文件，则是为了保证，跳转到指定页面后数据的正常显示，一般情况下，这种自身带有参数的跳转，目标页面会接受其所传的参数，然后打包传给后端去查询数据，最后把。
this.$router.push
weixin_37150764的博客
02-27 2117
路由传值 this.$router.push() （1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL （2）当点击 时，这个方法会在内部调用，即点击 等同于调用 router.push(…) 　　a)声明式： 　　b)编程式：router.push(…) c)该方法的参数可以是一个字符串路径，或者一个描述地址的对象。 // 字符串 router.push(‘home’) // 对象 ro
路由router.push传参实现数据接收
qq_70172010的博客
05-17 1375
实现一个系统的新增编辑按钮，如果是通过ruoter.push实现跳转到其它组件的功能，那么在新增和编辑的时候会传递数据，到下一个页面会进行接收数据，在获取该数据渲染即可。
vue中this.$router.push传参方式
cmj8043719242的博客
04-01 2281
获取参数使用 this.$route.query.id 或者 this.$route.params.id。1、query方式，相当于get请求，参数会在URL地址中显示。2、params方式，相当于post请求。
this.$router.push 怎么传参
05-30
this.$router.push方法可以通过query和params两种方式传递参数。 1. 通过query方式传递参数，可以在方法中使用query属性和键值对的形式传递参数，例如：this.$router.push({ path:'/xxx', query:{ idname:id } })，...
this.$router.push和path的区别
08-12
- *2* [this.$router.push两种传参方式的区别](https://blog.csdn.net/seimeii/article/details/121206227)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
this.$router.push() 方法中 path不能和params一起使用，否则params将无效
南北极之间
07-09 3384
this.$router.push() 方法中 path不能和params一起使用，否则params将无效！！ this.$router.push传递参数有2种方式： 第一种： 传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值 -- this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 第二种： 传递参数 -- this.$router.push({name: '
VueRouter: this.$route.push跳转,携带参数
天涯芳草
04-26 4万+
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...
this.$router.push方法 携带参数跳转路由
最新发布
qq676752351的博客
08-01 1860
如this.$router.push（{path：'/performance/scoring/projectEntry'}，query：{ type: 'add', month:this.queryParams.yf, role: this.role }）data=tableDate tableDate 就是一个数组，其中的每一行都是数组的一项，所以对于此表格数组可以应用.push（），.splice（）等方法 如要删除某一行，可以this.tableData.splice（传过来的index，1）。
Vue中 this.$router.push 传参 及 参数接收
热门推荐
Silence-Lee的博客
09-02 50万+
文章目录1、两种方式方法一：name跳转页面方法二：path跳转页面2、区别 1、两种方式 方法一：name跳转页面 this.$router.push({name:'anotherPage',params:{id:1}}); 另一页面接收参数方式： this.$route.params.id 示例： 控制台展示： 方法二：path跳转页面 this.$router.push({path:'/anotherPage',query:{id:1}}); 另一页面接收参数方式： this.$route.
vue-router总结
Lucky_LXG的博客
04-26 4565
想学习Vue的SPA应用，路由这一块是必不可少的。在刚接触时候也许有些困惑，在我学习并成功使用了vue-router后，将我的个人经   验分享出来，希望可以让同样对路由不知所措的同学有所帮助。 官网：https://router.vuejs.org/zh-cn/essentials/history-mode.html router-link router-link标
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()路由传值的方式
mwxlt1314的博客
12-02 739
this.$router.push()路由传值的方式 1、参数在地址栏显示 query传参 this.$router.push({path:"/workflowSet",query:{xml:res.data}}); 接收参数方式： let xml = this.$route.query.xml 2、参数不显示在地址栏 params传参 this.$router.push({ name: 'workflowSet', params: { xml:res.data }}); 接收参数方式： let x
vue 之this.$router.push、replace、go的区别
08-14 262
一、this.$router.push 说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面 使用： this.$router.push('/index') this.$router.push({path:'/index'}) this.$router.push({path:'/index',query:{name: '123'}}) t...
Vue中this.$router.push（参数） 实现页面跳转并接收参数
m0_65360496的博客
12-22 2547
Vue中this.$router.push（参数） 实现页面跳转并接收参数加传递对象数据并接收
Vue--Router--router-link与this.$router.push--使用/区别
IT利刃出鞘的博客
08-17 2021
本文介绍Vue Router的声明式路由跳转（router-link）与编程式路由跳转（this.$router.push）。
vue中this.$router.push()路由传值和获取的两种常见方法
Vivien_CC的博客
09-15 3万+
传递的参数是对象或数组今天接到了比较大的需求，由于这个公司的接口调用方法和上一段实习那家公司的写法很不一样，我花了很多时间在摸索，“踏出第一步总是最困难的”，果然没错，第一个很费劲，但完成之后有了思路，下面的任务也就完成得更顺利了一些。简单记录一下吧！1.首先要配置一下接口【api.js】2.在使用的地方先引入方法【跳转到的页面】3.调用的时候要注意是传什么类型的参数，不然请求不回想要的数据【切记切记看一下接口文档】4.配置跳转路由，并传出参数（注意类型）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

都挺好，刚刚好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值