利用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项目中返回之前页面数据不刷新的问题的更多相关文章

  1. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  2. Vue项目中v-for无法渲染数据

    在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...

  3. vue 项目中使用mock假数据实现前后端分离

    也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...

  4. Vue项目中jsonp抓取数据实现方式

    因为最近在做vue的项目,在前端做数据的时候遇到了数据抓取的难题,查了一些资料,自己也研究了一下,总体来说是搞出来了(基于黄奕老师的项目找出来的经验),废话不多说,直接上代码 ------------ ...

  5. 简述Vue项目中返回上一页

    1.背景 由于Vue所生成的项目叫做单页应用,即SPA,如果还是使用jQuery中的go(-)或back()是行不通的,所以,我们使用到了Vue中的编程式导航. 2.基本使用 定义返回按钮: < ...

  6. vue项目中在同一页面多次引入同一个echarts图表的自适应问题

    在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...

  7. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  8. vue项目中使用百度统计

    统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...

  9. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

随机推荐

  1. 【pip install】+【环境变量配置】

    1.环境变量配置 (1)用打开后下面的"系统变量"进行配置,下面的名字为Path: (2)举例,如果安装ping.exe:而且ping.exe在C:\lianghua\ping.e ...

  2. 基于Spring Boot的线程池监控方案

    前言 这篇是推动大家异步编程的思想的线程池的准备篇,要做好监控,让大家使用无后顾之忧,敬畏生产. 为什么需要对线程池进行监控 Java线程池作为最常使用到的并发工具,相信大家都不陌生,但是你真的确定使 ...

  3. MySQL主从复制介绍:使用场景、原理和实践

    MySQL主从复制介绍:使用场景.原理和实践 MySQL数据库的主从复制方案,和使用scp/rsync等命令进行的文件级别复制类似,都是数据的远程传输,只不过MySQL的主从复制是其自带的功能,无需借 ...

  4. 还不会用springboot写接口?快看这里,手把手操作,一发入魂~

    1.springboot简介 Spring Boot 可以轻松创建可以"直接运行"的独立的.生产级的基于 Spring 的应用程序. 特征 创建独立的 Spring 应用程序 直接 ...

  5. CPU是海王?聊聊 主/子线程 和 同/异步 的关系

    最近表弟一直在找实习,经常会问我一些问题,有些问题在没有经历过真实工作时是真的不好理解的,所以我开了这个[表弟专栏],专门为找工作的表弟解决一些疑惑. 这篇文章从计算机发展的角度出发,描述为什么计算机 ...

  6. Using Beyond Compare with TFS

    In order to configure Visual Studio to use Beyond Compare for a compare operation choose the followi ...

  7. Rocket Mq 常用API 及简单运维

    RocketMQ 常用API 消息 消息消费模式 消息消费模式由消费者来决定,可以由消费者设置MessageModel来决定消息模式. 消息模式默认为集群消费模式 consumer.setMessag ...

  8. 开源三轴云台EVVGC(simple BGC)分析

    一. 主程序分析 主程序结构清晰,流程如图所示,下面将对每个部分做详细分析 二. 系统初始化 系统初始化部分的流程如上图所示,下面对每部分做具体分析 1. 时钟初始化 该部分主要是使能DWT,用DWT ...

  9. luoguP4383 [八省联考2018]林克卡特树(树上dp,wqs二分)

    luoguP4383 [八省联考2018]林克卡特树(树上dp,wqs二分) Luogu 题解时间 $ k $ 条边权为 $ 0 $ 的边. 是的,边权为零. 转化成选正好 $ k+1 $ 条链. $ ...

  10. jsp:useBean报错The value for the useBean class attribute X is invalid

    一.解决方法 1.先检查<jsp:useBean id="dog" class="cn.edu.dgut.el.tools.Dog" scope=&quo ...