vue,下级页面刷新导致路由跳转带过来的数据消失的解决方法

if(typeof(this.$route.query.result)==‘string‘){
  //刷新时走这
}else{ //正常路由跳转过来后就把数据塞到 localStorage
  let obj = JSON.stringify(this.$route.query); //转化为JSON字符串
  localStorage.setItem("prizeResult", obj); //数据存storage,防止刷新丢失
} 去localStorage取
let result = JSON.parse(localStorage.getItem("prizeResult"));

//对自己的业务逻辑进行处理
this.showAll(result);

原文地址:https://www.cnblogs.com/1rookie/p/10151634.html

时间: 2024-11-05 16:31:04

vue,下级页面刷新导致路由跳转带过来的数据消失的解决方法的相关文章

AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共勉之. 页面正常加载后,显示如下: 按F5刷新之后,页面如下所示: 很明显,页面显示出现了异常.回过头再看看Chrome的错误提示, 具体代码如下: 正是以上代码导致了错误的发生. 追根溯源 让我们回顾一下,错误到底是如何发生的.正常加载情况下,页面正常显示很容易理解,程序是按照既定的数据流走的.但

nignx部署Vue单页面刷新路由404问题解决

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({

解决vuex页面刷新导致数据丢失问题

vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,因为页面刷新之后代码重新加载这样vuex的数据自然就会为空.怎么解决这个问题呢?vuex自身好像没有太好的解决方案,但是我们可以利用localStorage和sessionStorage对数据进行保存.这样这个问题就解决了.这个方法比较简单但是其实这样做就和vuex没有太大的关系了,我们可以将数据存在localStorage中为什么还要用vuex呢?所以这种方法可用但是不建议,那么还有什么解决方案呢? 其实网上也有

win7删除桌面文件后手动刷新才会消失的解决方法

如题,win7在删除桌面文件时不会自动消失,只有等到你手动刷新了才会消失.这不影响系统正常运行,但日常使用中可能会造成用户的困扰,引起这个问题大部份都是有以下两个原因: 一.显卡驱动未正确安装. 二.系统本身不会自动刷新桌面. 解决方法: 一.如果是显卡未安装好,那么只需要根据显卡的型号,下载相对应的驱动安装即可.当然,也可以选择安装驱动精灵,然后进行驱动的更新. 二.系统本身不能自动刷新的问题,可以修改注册表相关项来实现,令系统自动刷新. 首先,点击”开始→运行“,在对话框中输入”regedi

zf-关于邵阳市打印模块个别单号打印之后不会跳转到收费模块的BUG的解决方法

原因是 办结的时候 有个收费管理,里面会生成收费项目的单号,但是有1个单号是有问题的,没有关联到数据库里面的其他的表,所以打印之后不能跳转.如果跳转到收费模块 那么数据库里面的一个flag字段会变成9. 解决方法是 把这条数据删掉,然后重新创建一个一模一样的数据(注意:oid一定要一样才行)然后就解决了,之所以能解决目测是因为这个其他的表管理这个收费项目的表的时候,这个收费项目是本身就存在的,然而,如果要关联成功,需要在关联之后插入才可行.因此把这条数据删除之后重新插入一行一模一样的数据就OK了

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法

bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore下的index.js,全部引入的要找mint下面mint-ui.common.js 路径如下:你的项目名/node_modules\mint-ui\lib\loadmore\index.js 搜索 handleTouchEnd ,记得写event进去 handleTouchEnd: function

Vue爬坑之旅(八):vue单页面中锚点跳转

一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号.但是在单页面中会有路由误判的情况.所以在单页面中锚点可改为参数传递的方式. 一.封装一个外部js:anchor.js //锚点跳转 function goAnchor(selector) { var anchor = this.$el.querySelector(selector);//获取元素 if(anchor) { setTimeout(()=>{//页面没有渲染完成时是无法滚动的,因此设

解决vue单页面刷新后vuex中数据恢复初始值的问题

思路是页面关闭前将state的数据存储到浏览器缓存里,页面加载时再取出来存到state中 //App.vue created () { if (this.$getLocal("store")) { this.$store.replaceState( Object.assign({}, this.$store.state, this.$getLocal("store", "parse")) ); } window.addEventListener(

vue.js页面刷新出现闪烁问题的解决

因为浏览器是html从上到下执行,先执行Dom元素,然后执行javaScript元素,v-show.v-if实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话,会显示的特别明显. 以上两个问题都可以使用以下的方案来解决. 在css中定义 [v-cloak] {   display:none; } 在v-if中加上v-cloak即可解决. 示例: [v-cloak] { display: none;  }  <div v-cloak> {{ m