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 ...
随机推荐
- matplotlib 3D数据-【老鱼学matplotlib】
直接上代码: import numpy as np import matplotlib.pyplot as plt # 导入显示3D的库 from mpl_toolkits.mplot3d impor ...
- tensorflow建造神经网络-【老鱼学tensorflow】
上次我们添加了一个add_layer函数,这次就要创建一个神经网络来预测/拟合相应的数据. 下面我们先来创建一下虚拟的数据,这个数据为二次曲线数据,但同时增加了一些噪点,其图像为: 相应的创建这些伪造 ...
- P1265 公路修建 最小生成树
题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公路.修建公路的任务由各城市共同完成. 修建工程分若干轮完成.在每一轮中,每个城市选择一个 ...
- Vue H5 项目模板
使用了 mint-ui sass vue fastclick vue router 一个项目的初始化状态,一个新项目,陆陆续续花了2天时间搭起来的. 里面有mint-ui的基本用法 tabbar 还有 ...
- PostgreSQL自学笔记:8 查询数据
8 查询数据 8.1 基本查询语句 select语句的基本格式是: select {* | 字段1[,字段2,...]} [ from 表1,表2... [where 表达式] [group by & ...
- SpringCloud教程 | 第四篇:断路器(Hystrix)
在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...
- 自定义MVC实现登录案例
MVC框架: MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离 ...
- mongodb 遇到的问题一 Error: connect ECONNREFUSED 127.0.0.1:27017
node配合mongodb是配置完成后,访问时出现 Error: connect ECONNREFUSED 127.0.0.1:27017,的报错 原因在于你的mongodb数据库没开, node下的 ...
- XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Korea
A. Donut 扫描线+线段树. #include<cstdio> #include<algorithm> using namespace std; typedef long ...
- 关于在虚拟机上安装ubuntu输入不了中文的问题
打开终端后,无法输入中文,按照网络上的教程 1.安装语言包 System Settings–>Language Support–>Install/Remove Languages 选中ch ...