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))
- },
vue页面传参的更多相关文章
- vue页面传参和接参
https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy) js** this.$router.push({ name: 'Flow ...
- vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数
vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- 关于页面传参,decodeURI和decodeURIComponent
之前写过一个关于页面传参的,但是是前端相对于自己的页面做的跳转,也就是页面1,跳转到页面2,里面带的参数.这里可以参考我上一篇文章,包括里面参数中如果有数组和json格式的情况.但是需要注意的是,我前 ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- Strut2页面传参跳转 --Struts2
1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...
- FastAdmin 前端页面传参笔记
FastAdmin 前端页面传参笔记 看到 QQ 群里的小伙伴询问如何传参,然后在社区里找到一笔记帖子 1 还要参考在线文档控制器部分2. 引用 Karson 的回复: 如果我们需要自己在控制器中透传 ...
- AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
随机推荐
- Android人脸检测1(静态图片)
搭建Android人脸识别环境花了很长时间(可以查看之前的文章),解决Android开发中的杂七杂八小问题也耗时不少. 今天记录一下,点击选择照片或者拍照上传照片进行人脸检测的小demo. (andr ...
- Doctrine2-基础概念
使用框架操作数据库的几个要求 1.安全,比如防止sql注入等,pdo里面prepare,execute 就可以 2.性能,数据库操作是最基本的操作,频繁使用,需要考虑到执行效率 3.ORM(objec ...
- PID实战-STM32电机PWM力矩调节系统
系统阐述:
- Sublime编译器快捷键大全
Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有打开文件 Ctrl+Shift+V ...
- CF444E. DZY Loves Planting
题目链接 CF444E. DZY Loves Planting 题解 可以..二分网络流 可是 考虑边从小到大排序 考虑每条边能否成为答案 用并查集维护节点之间的联通性 对于一条边来说,如果这条边可以 ...
- es6学习笔记-Symbol
概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制 ...
- JavaScript开发者应懂的33个概念
简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇文章是参照 @leonardomso 创立,英文版项 ...
- DAG---矩阵嵌套问题
矩形嵌套时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c, ...
- c++第七周学习小结
时间过得好快,一下就上了好多节c++的课了.我们现在新学了控制语句和函数,这对我来说有点难.老师上课的时候ppt过得有些快,自己会跟不上,所以以后上课前要预习充分.在经过同学和搜索引擎帮助后,我完成了 ...
- HBuilder
什么是HBuilder? HBbuilder是DCloud(数字天堂)推出的一款支持HTML5的WEB开发IDE,主体是由java编写的,它将HTML/JS代码块进行代码封装,达到简单数据形成代码的特 ...