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 ...
随机推荐
- openKM部署二次开发,eclipse环境
1.下载openKM_install_forwin安装包,配置jdk环境,start openKM,访问localhost\OpenKM,用户:okmAdmin 密码:admin.查看是否启动成功.安 ...
- 咸鱼入门到放弃8--jsp<三>jsp内置对象
NO. 内置对象 类型 1 pageContext javax.servlet.jsp.PageContext 2 request javax.servlet.http.HttpServletRequ ...
- yii2的csrf验证原理分析及token缓存解决方案
本文主要分三个部分,首先简单介绍csrf,接着对照源码重点分析一下yii框架的验证原理,最后针对页面缓存导致的token被缓存提出一种可行的方案.涉及的知识点会作为附录附于文末. 1.CSRF描述 C ...
- ListView 上拉加载更多
ListView 上拉加载更多 首先来个效果图 界面布局 <?xml version="1.0" encoding="utf-8"?> <Re ...
- Huginn定时时间不准确或延后问题
碰巧遇到的:Huginn定时为每天晚上九点执行的任务,却在午后1点执行了, 查了下,午后一点,正好是太平洋时间前一天的晚上9点,一开始没考虑到,午后调试程序,它莫名其妙执行了一次,才发现问题, 那就换 ...
- ActiveMq实例
1.发布端 import javax.jms.Connection; import javax.jms.ConnectionFactory; import javax.jms.DeliveryMode ...
- mobile_基础事件
DOM0 级事件模型(模拟器不支持) DOM0 级事件绑定 在 移动端有 300ms 的延迟 ontouchstart 手指按下事件 ontouchmove 手指移动事件 pntouchend 手指离 ...
- react_app 项目开发_遇到的坑
1. favicon.ico <link rel="shortcut icon" type="image/x-icon" href="./fav ...
- 2018-2019-1 20189210 《Linux内核原理与分析》第三周作业
一.学习笔记 计算机的"三大法宝" 1.程序存储计算机. 2.函数调用对栈.堆栈的作用是:记录函数调用框架.传递函数参数.保存返回值地址.提供函数内部局部变量的存储空间.函数调用堆 ...
- jdbc连接oracle时报错 Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; nested exception is org.apache.commons.dbcp.SQLNestedException: Cannot create PoolableC
错误: Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; ...