最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue通过$router.push传参数代码示例
时间:2022-06-29 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下vue通过$router.push传参数代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
下面通过A页面向B页面传值来举个例子:
//A页面: this.$router.push({ name: '页面B', params: { data: '我是要传递的参数' } }) //B页面拿到传来的值: this.data = this.$route.params.data // 拿到上个页面传来的数据
代码很简单, 一下是需要注意的几点:
1.this.$router.push()方法里的params 可以传多个参数, 如:
//A页面 this.$router.push({ name: '页面B', params: { data1: '参数1', data2: '参数2'} }) //B页面, 拿到传来的参数 this.data1 = this.$route.params.data1 this.data2 = this.$route.params.data2
2.this.$router.push()方法除了可以传递一般参数以外, 还能传递查询参数,代码如下:
this.$router.push({path: '/pagePath', query: {queryData: "2"}});
最终的效果是: /pagePath?queryData=2
this.$router.push传参及参数接收
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.query.id
2、区别
1、path的query传参的参数会带在url后边展示在地址栏(/anotherPage?id=1),name的params传参的参数不会展示到地址栏。
2、由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效,需要用name来指定页面。
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12