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. xml格式转成json格式,使用Python

    import xml.etree.ElementTree root=xml.etree.ElementTree.parse('testXml.xml') book=root.findall('pers ...

  2. Vue H5 项目模板

    使用了 mint-ui sass vue fastclick vue router 一个项目的初始化状态,一个新项目,陆陆续续花了2天时间搭起来的. 里面有mint-ui的基本用法 tabbar 还有 ...

  3. CSS3常用

    1.user-select新增特性,主流浏览器都支持 -webkit-user-select: none;  /* Chrome all / Safari all /opera15+*/  -moz- ...

  4. 数据库交互之减少IO次数

    一个对程序有要求的人一定会尽量去想办法减少IO次数来减少响应时间,但是又不能一味地为了减少IO次数而一直占用连接池.数据库连接一开一关也是需要耗费时间的,下面以SqlServer为例列举几种常见的减少 ...

  5. HTML5_图片合成_刮刮卡

    刮刮卡(图片合成) 定义: globalCompositeOperation 属性,设置或返回如何将源图像 将 myCanvas 的背景图设置为一张图片,(刮开后显示) // 目标图像(已有的,外面一 ...

  6. [LeetCode] Generate Random Point in a Circle 生成圆中的随机点

    Given the radius and x-y positions of the center of a circle, write a function randPoint which gener ...

  7. 107个JS常用方法(持续更新中)

    1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个 ...

  8. 安装tomcat9

    要提前安装好jdk,不要是openjdk //我之前有文章写安装jdk的 [root@ycj ~]# wget http://mirrors.hust.edu.cn/apache/tomcat/tom ...

  9. WcPro项目(WordCount优化)

    1 基本任务:代码编写+单元测试 1.1 项目GitHub地址 https://github.com/ReWr1te/WcPro 1.2 项目PSP表格 PSP2.1 PSP阶段 预估耗时(分钟) 实 ...

  10. WordCount测试项目小结

    一.本文对应项目GitHub地址 https://github.com/ReWr1te/WCProject 请参照最新版本(WCProject4.0) 二.项目PSP表格 PSP2.1 PSP阶段 预 ...