vue页面传参

1、传的参数是数组

传递参数的页面

let setStr = encodeURIComponent(JSON.stringify(this.tableData));
this.$router.push(‘/send/setMessageSelf?setStr=‘ + setStr);

接收参数页面:

mounted(){
        let setArray = JSON.parse(this.$route.query.setStr);
        console.log(setArray);
},

解释:

  首先是let一个数组,这个数组是我要传递给另一个页面的参数,如果直接传就会变成[object object],所以我们需要通过JSON.stringify(数组)来把这个数组变成一个字符串,把它变成字符串后,如果直接传递,正常来说是没有问题的,但是当我们碰到有特殊符号的时候,比方说我们其中有一个数据是一串网址,那转换就会遇到问题,所以我们需要使encodeURIComponent()函数把转换出来的字符串进行编码,encodeURIComponent()函数可把字符串作为URI 组件进行编码,该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ‘ ( ) ,这样我们就能得到我们想要的字符串了。

  因为我们是把数组变成了字符串传过去的,所以我们在接收到这个字符串的时候,需要对它进行JSON.parse()转成我们要的数组。

2、传递的是字符串

传递参数的页面:

this.$router.push(‘/message/advise/‘ + this.id);

接收参数的页面:

id: this.$route.params.id,

路由设置:

{
     path: ‘/message/advise/:id‘,
     name: ‘活动——编辑-推荐信息‘,
     component: resolve =>void(require([‘@/views/admin/message/activityInformation/Advise‘], resolve))
},

原文地址:https://www.cnblogs.com/-rainbow-/p/9740979.html

时间: 2024-10-08 13:40:43

vue页面传参的相关文章

Vue 页面传参方式 Query 和 Params

1. query 与 params 传参 query ????需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式 http://localhost:8033/Permission/Role/Form?productCode=crm-operate&roleId=1&roleName=admin&roleType=-1&roleDesc=%E7%AE%A1%E7%90%86%E5%91%98 params ????需要配合 name 属性使用

Vue路由传参的几种方式

原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具体区分和使用后续分析. 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params传参(url中显示参数)

SpringMVC——接收请求参数和页面传参

转自:http://blog.csdn.net/z69183787/article/details/41653875 1.接收请求请求 (1)使用HttpServletRequest获取,如request.getParameter("name") (2)@RequestParam("pass")String password,或@Param("pass")String password.表单参数也可以用这种方式获取,Spring会自动将表单参数注

页面传参中文乱码解决方案

jsp页面传递参数到servlet,只要参数有中文就是乱码,大多数是??????乱码,尝试了网上比较普遍的好多种办法都不行,最后加了一句话解决掉,分享给大家. 1.打开tomcat安装目录 2.找到conf文件夹 3.打开里面的server.xml 4.找到 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443

angualr $http 页面传参问题

POST 请求传参 $http({ method: "POST", url: url, data: { "role_id": 1, "telephone": $scope.setData.telephone, "user_pwd": $scope.setData.user_pwd }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, trans

小程序-页面传参json数组

1.页面传参,参数为json 2.直接传参不行 3.A到B A页面 JSON.stringify(data) B页面 JSON.parse(data) 原文地址:https://www.cnblogs.com/congfeicong/p/11002170.html

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

Vue跳转页面传参

1.// 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) ps:params这样的传参前面只能是name 2.// 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 3.在routes定义path:‘/detail/:id’ 页面:to="/detail/+12345" 取参数的时

vue 路由传参的三种基本模式

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$