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. AtCoder Grand Contest 027 (AGC017) D - Modulo Matrix 构造

    原文链接https://www.cnblogs.com/zhouzhendong/p/AGC027C.html 题解 首先我们假装 max mod min = 1 然后对着这个构造. 将各自黑白染色, ...

  2. 使用Python下载文件

    python -c "with open('/tmp/file.sh', 'wb') as f: import urllib2; f.write(urllib2.urlopen('http: ...

  3. Konva入门教程

    啥是 Konva Konva 是一个 canvas 库,可以让我们像操作 DOM 一样来操作 canvas,并提供了对 canvas 中元素的事件机制,拖放操作的支持.所以,用它来做一个拼图游戏什么的 ...

  4. SQLyog 最新版本12.5-64bit 完美破解,亲测可用!

    声明:本文只是提供一个网络上找到的针对12.5版本的注册码使用方式做一个说明,不建议企业用户破解,有条件的还是希望大家购买原版.当然个人学习用的但又不想购买原版的,这里只是提供个途径,请勿用做商业用途 ...

  5. [POJ1220]NUMBER BASE CONVERSION (高精,进制转换)

    题意 任意进制之间的高进的转换 思路 相模倒排,高精处理 代码 我太弱了,下面附一个讨论里发的maigo思路的代码 ],A[]; ],d[]; main(){ for(scanf("%d&q ...

  6. # Do—Now——团队冲刺博客_总结篇

    Do-Now--团队冲刺博客_总结篇 目录 博客链接 作者 1. 第一篇(领航篇) @仇夏 2. 第二篇 @侯泽洋 3. 第三篇 @仇夏 4. 第四篇 @周亚杰 5. 第五篇 @唐才铭 6. 第六篇 ...

  7. centos7.4中安装docker

    #!/bin/sh # 安装docker # 在docker中安装mysql # 解决了docker容器中无法输入中文的问题 ##########################安装docker # ...

  8. angular.equals()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. [Luogu P2563]质数和分解

    题目链接 话不多说,这是一道质数题+完全背包.先预处理筛出质数,直接背包就行. #include<iostream> #include<cstdio> #include< ...

  10. pytorch入门与实践-3 Tensor详解

    1--如第二章所讲,Tensor的本质是矩阵或数据 2--对Tensor的操作分类 |----API分类 |------torch中定义的: t.f(a,b) |------tensor的成员函数: ...