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页面传参的更多相关文章

  1. vue页面传参和接参

    https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy) js** this.$router.push({ name: 'Flow ...

  2. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  3. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  4. 关于页面传参,decodeURI和decodeURIComponent

    之前写过一个关于页面传参的,但是是前端相对于自己的页面做的跳转,也就是页面1,跳转到页面2,里面带的参数.这里可以参考我上一篇文章,包括里面参数中如果有数组和json格式的情况.但是需要注意的是,我前 ...

  5. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  6. Strut2页面传参跳转 --Struts2

    1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...

  7. FastAdmin 前端页面传参笔记

    FastAdmin 前端页面传参笔记 看到 QQ 群里的小伙伴询问如何传参,然后在社区里找到一笔记帖子 1 还要参考在线文档控制器部分2. 引用 Karson 的回复: 如果我们需要自己在控制器中透传 ...

  8. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  9. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

随机推荐

  1. spark actions 算子

    package action; import org.apache.spark.SparkConf; import org.apache.spark.api.java.JavaPairRDD; imp ...

  2. Terraria(泰拉瑞亚)存档覆盖(Linux)

    这是一篇关于游戏的不正经博客 ~ 游戏介绍: <泰拉瑞亚>是由Re-Logic公司开发的一款高自由度的沙盒游戏,于2011年5月16日在PC上发行. 玩家可以在游戏中做很多事情:制造武器战 ...

  3. 第一篇 Flask初始

    Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不管你用 ...

  4. Vs2017 typescript 开发小问题

    最近想写点ts的东西,以前用vs2015很方便,直接创建一个ts app项目就折腾了. Vs2017打开,居然发现这个项目模板不见了.   于是研究了一下,由于原来的ts app项目就是一个asp.n ...

  5. [CF542D]Superhero's Job

    [CF542D]Superhero's Job 题目大意: 定义函数 \[ J(x) = \sum_{\substack{1 \leq k \leq x \\ k \mid x \\ \gcd \le ...

  6. jwt、session、oauth 异同

    1,jwt 和session机制 首先jwt 和session机制 都是用户认证的,oauth 不是 session 的流程: 1.用户向服务器发送用户名和密码. 2.服务器验证通过后,在当前对话(s ...

  7. MBA 拓展训练总结

    1. 拓展训练,大家绑腿跑 沟通时间极短, 规则制定不完善, 对方'王者队'沟通很好, 女队练习的同时, 男队边观看边练习, 效率很高, 由于之前王者输的比较多, 总结很多, 所以执行力也占优了, 我 ...

  8. ie下js不执行的几种可能

    1.首先考虑的就是代码是否有报错2.其次搜索代码中是否有console.log等测试的代码3.检查所用的方法是否兼容ie 以上是鄙人在开发过程中遇到的几种情况,抛砖来引玉~~

  9. 11_ for 练习 _ Math.sqrt

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. ubuntu16.04中supervisor安装与简单使用(转载)

    ubuntu16.04中supervisor安装与简单使用 supervisor 进程管理是可以让进程在后台运行,而不占用控制台影响使用 1. 安装 supervisor sudo apt insta ...