情况

情况再简单说明一下: 有三个页面(a-列表页面,b-内页1,c-内页2),页面a->页面b->页面c有参数传递.从a进入b后,刷新b页面拿不到a页面传进来的参数.或者b页面再进入c页面,并由c页面返回b页面,b页面丢失a页面传入的参数.

参数的传递使用的是vue-router, query传参

let para = {
id: info.subjId,
subjInit: info.subjInit,
subjectGuid: info.subjectGuid,
visitNo: info.visitNo
}
this.$router.push({path:'/sign_in_already_detail',query:{para: para }})

首先说明一下,使用路由的query传参是可以在刷新的时候保留参数的

之所以出现上面的问题是因为:在query传参数的时候没有对对象参数序列化--就是没有转成字符串.

所以b页面(接收参数的页面)的路由展示是下图这样. 只有在第一次进入b页面的时候能够拿到参数,之后就获取不到了

解决办法也就很明了了,在传参数的时候对象参数需要序列化处理

let para = {
id: info.subjId,
subjInit: info.subjInit,
subjectGuid: info.subjectGuid,
visitNo: info.visitNo
}
this.$router.push({path:'/sign_in_already_detail',query:{para: JSON.stringify( para) }})

这样进入b页面的路由就是如下图这样的,即使在刷新页面后地址也是不会变的.

不过使用路由传参对于参数的格式以及字符长度我还不是很清楚,猜测字符长度和一般网页get请求中url的长度差不多.所以参数字符过长还是不适合使用路由传参

其他页面间传参方法

  1. bus 传参

    2.vue-router的params传参数

    3.利用浏览器的sessionStorage,localStorage,Cookie传参

vue 页面间使用路由传参数,刷新页面后获取不到参数的问题的更多相关文章

  1. vue路由传参刷新丢失

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...

  2. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  3. 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  4. vue刷新路由,不刷新页面

    1.路由介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来 ...

  5. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  6. 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题

    摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...

  7. vue-cli3使用vue-router 使用动态路由,在刷新页面时报错

    刚发现的一个问题,在使用vue-cli3创建项目之后,使用动=动态路由,demo: { path: '/aa/:id', name: 'aa', component: aa }, 编程式路由: thi ...

  8. vue学习记录④(路由传参)

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  9. vue:页面跳转和传参(页面之间,父传子,子传父)

    1.返回上一个页面: A.<a @click="$router.back(-1)" class="btn">重新加载</a> B.thi ...

随机推荐

  1. nodejs+nginx+mongdb+redis安装学习笔记(之nodejs安装)

    基础环境 本文安装示例使用ubuntu-14.10-server 64位 操作系统,并没有在其他系统中测试 第一步:安装Nodejs 1.通过apt-get install 安装 (1)下载安装deb ...

  2. 【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比

    CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. Docker+Dubbo+Zookeeper实现RPC远程调用

    Docker+Dubbo+Zookeeper 1.安装Docker 1.1卸载旧版本的Docker //如果Docker处于与运行状态 未运行可跳过 [root@MrADiao ~]# systemc ...

  4. for循环的更多写法

    在看设计模式这本书,遇到一个令人疑惑的for循环语句 for (var i = 0, type;type = ['String', 'Array', 'Number'][i++]) { 代码块 } 比 ...

  5. Redis Geo HyperLogLog类型介绍

    ​Geo类型 Redis3.2.0版本推出 可以将用户给定的地理位置信息存储起来,并对这些信息进行操作 GEOADD key longitude latitude member [longitude ...

  6. Python 中国大学排名定向爬虫

    代码来自于中国大学Mooc北京理工大学Pythont教学团队:https://www.icourse163.org/learn/BIT-1001870001#/learn/content?type=d ...

  7. python的Requests库的使用

    Requests模块: Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量 ...

  8. HashMap面试题,看这一篇就够了!

    目录 序言 一.JDK7中的HashMap底层实现 1.1 基础知识 1.2 put()方法 1.2.1 特殊key值处理 1.2.2 扩容 1.2.3 如何计算bucket下标? 1.2.4 在目标 ...

  9. ElasticSearch如何一次查询出全部数据—基于Scroll

    Elasticsearch 查询结果默认只显示10条,可以通过设置from及size来达到分页的效果(详见附3),但是 from + size <= 10,000,因为index.max_res ...

  10. kube-apiserver 集群服务安装

    目录 创建 kube-apiserver 证书 生成证书和私钥 创建加密配置文件 创建审计策略文件 分发 kube-apiserver 二进制文件 创建后续访问 metrics-server 使用的证 ...