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. day26 面向对象 单例模式总结

    如果是在python2中,就需要手动继承object, 基于__new__方法 基于__new__方法 class Foo(object): def __new__(cls,*args,**kwarg ...

  2. sqlalchemy.exc.ProgrammingError: (pymysql.err.ProgrammingError)

    在我学习flask建立网站时间碰到了一个棘手的问题,就是在我进行操作日志的更新时间,发现表格建立有点错误,导致表缺失,从而报了下面的错误 sqlalchemy.exc.ProgrammingError ...

  3. java线程系列之三(线程协作)

    本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/7433673,转载请注明. 上一篇讲述了线程的互斥(同步),但是在很多情况 ...

  4. NOIP-扫雷游戏

    题目描述 扫雷游戏是一款十分经典的单机小游戏.在n行m列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格).玩家翻开一个非地雷格时,该格将会出现一个数字——提示周围格子中有 ...

  5. Jedis自己整理比较全的API

    package com.tebon.ams.utils; import com.alibaba.fastjson.JSON;import com.tebon.ams.util.ObjectUtil;i ...

  6. C博客作业01--分支,顺序结构

    本章学习总结(2分) 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 本周初次接触C语言,一开始难度较大,很多代码都看不懂,书里面的章节要看很多遍.开始编写代码时也遇到很多困难 ...

  7. [No000019A]【波浪理论精典教学课程】

    波浪理论的产生和发展     拉尔夫·纳尔逊·艾略特(Ralph Nelson Elliott ),是波浪理论的创始人.1871年7月28日出生在美国密苏里州堪萨斯市的玛丽斯维利镇Marysville ...

  8. X86-32位架构的CPU是不是内存只能到4G

    不是的,可以通过分页机制扩展实现超过4G内存的支持. 什么是分页机制扩展? PAE. 什么是PAE?   PAE如何实现的?  

  9. SQL的几种连接:内连接、外连接(左连接、右连接、全连接)

    表结构见前面博客 1.内连接 1.1.等值连接:在连接条件中使用等于号(=)运算符比较被连接列的列值,其查询结果中列出被连接表中的所有列,包括其中的重复列. 三种写法: select * from t ...

  10. 【转载】Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码

    本文转载自脚本之家,源网址为:https://www.jb51.net/article/147429.htm 一.Python中日期时间模块datetime介绍 (一).datetime模块中包含如下 ...