vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的
这个就属于vue的数据获取问题
解决办法是将数据获取封装到一个函数中,然后created钩子函数中调用这个函数,再在watch选项中设置监听路由的变化,通过不同的路由变化来确定是否需要重新获取数据
如代码
//先在methods里封装获取数据的方法
methods:{
clear(){
localStorage.removeItem('userills');
},
fetchData(){
this.illness = [];
let xuhaonum = localStorage.getItem('nums');
let xuhao = xuhaonum.replace(/\d+/g,'');
let _this = this;
axios.get(url+'?xuhao='+xuhao).then(function(res){
console.log(res);
let condition = res.data.data.zhengzhuang;
let len = condition.length;
for(let i = 0;i<len;i++){
let items = {
key:'',
value:'',
flag:''
}
items.value = condition[i].sName;
items.key = condition[i].sID;
items.flag = condition[i].nFlag;
_this.illness.push(items);
//这里要构造key = sname value = 下一个页面的参数
} }).catch(function(err){
_this.showerror = !_this.showerror;
})
},
}, //然后在create中调用
created(){
this.fetchData();
this.clear();
}, //利用watch来监视路由的变化来确定是否要再次获取数据 watch:{
'$route':"fetchData"
},
//另外,如果多个数据需要获取,可以采用将watch写成数组的形式,之前不知道要写成数组的形式,后面的覆盖了前面写的。造成一些bug。多个数据获取就写成如下的
watch:{
'$route':["fetchData","clear"]
},
vue项目中返回之前页面数据不刷新的问题的更多相关文章
- vue 项目中如何在页面刷新的状态下保留数据
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...
- Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
- vue 项目中使用mock假数据实现前后端分离
也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...
- Vue项目中jsonp抓取数据实现方式
因为最近在做vue的项目,在前端做数据的时候遇到了数据抓取的难题,查了一些资料,自己也研究了一下,总体来说是搞出来了(基于黄奕老师的项目找出来的经验),废话不多说,直接上代码 ------------ ...
- 简述Vue项目中返回上一页
1.背景 由于Vue所生成的项目叫做单页应用,即SPA,如果还是使用jQuery中的go(-)或back()是行不通的,所以,我们使用到了Vue中的编程式导航. 2.基本使用 定义返回按钮: < ...
- vue项目中在同一页面多次引入同一个echarts图表的自适应问题
在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- vue项目中使用百度统计
统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
随机推荐
- chrome浏览器添加JSON插件
1.下载JSON-Handel插件 1) http://jsonhandle.sinaapp.com 点击下载会将json-handle 插件(crx)下载本地 2.打开Chrome浏览器地址栏输入: ...
- 03 Java的数据类型分为两大类 类型转换 八大基本类型
数据类型 强类型语言:要求变量的使用要严格符合规定,所有变量都必须先定义后才能使用 Java的数据类型分为两大类 基本类型(primitive type) 数值类型 整数类型 byte占1个字节范围: ...
- matlab语法基础(处理一点数据)
1.声明函数,返回参数data,函数名为simutrack function data=simutrack(x0,y0) 2.%用于标注,注释 3.平方 ^2 4.二维零矩阵 [0 0;0 0] 5. ...
- python 程序小练习
print("Type integers,each followed by Enter; or just Enter to finish") total = 0 count = 0 ...
- Net中委托之三委托的高级应用
1. 使用委托来解决逻辑分离,解除耦合 2.委托的高级应用实例 using System; using System.Collections.Generic; using System.Linq; u ...
- exit函数和return语句
exit函数是c语言的库函数,有一个整型的参数,代表进程终止,这个函数需<stdlib.h>头文件 在函数中写return只是代表函数终止了,不管在程序的任何位置调用exit那么进程就立即 ...
- CVE-2017-8759 微软word漏洞复现以及利用
CVE-2017-8759 微软word漏洞复现以及利用 0x00 漏洞描述 近日,360集团核心安全事业部分析团队发现一个新型的Office文档高级威胁攻击,攻击使用了9月12日补丁刚修复的.NET ...
- windows server 2019 域控批量新增不用,只看这一篇就够了,别的不用看
windows server 2019 域控批量新增不用,只看这一篇就够了,别的不用看 1. 新建excel表格 A B C D E 姓 名 全名 登录名 密码 李 四 李四 李四 test123!@ ...
- 实验:zk master宕机后,临时节点在新的master上是否存在,结果出人意料
一.实验 实验说明:3台zk集群,主要验证:master上的客户端,在master上建立临时节点,当master宕机时,其他follower选为主后,临时节点是否存在. 主要是通过此来验证,基于zk的 ...
- 对象头源码讲解,原来,指向objectMonitor的指针在这里
markword 注释 该文件目录在: \openjdk-jdk8u\hotspot\src\share\vm\oops\markOop.hpp #ifndef SHARE_VM_OOPS_MARKO ...