利用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. MySQL-DB-封装-升级版

    <?php class DB { //定义属性 private $host;//主机名 private $port;//端口号 private $name;//用户名 private $pass ...

  2. Caffe2源码解析之core

    写在前面 在对Tensorflow的后端源码进行了拆解(参见tensorflow源码解析系列文章索引)之后,很想跟其它深度学习框架的实现进行对比,根据框架的流行程度,先选择了Pytorch.Pytor ...

  3. C++ STL vector扩容原理分析

    扩容特点: 1)新增元素:vector通过一个连续的数组存放元素,如果集合已满,在新增数据的时候,就要分配一块更大的内存,将原来的数据复制过来,释放之前的内存,在插入新增的元素: 2)对vector的 ...

  4. mysql卡顿问题查找和解决方法

    mysql卡顿问题查找和解决方法 版权一.所遇问题        写在前边的废话:今天面试阿里的时候问到过类似问题,以前做调优的时候都是现查现用,缺乏总结,面试时答得也不好,今天趁此机会做一个梳理,知 ...

  5. idea Mybatis mapper配置文件删除SQL语句背景色

    原样式: 看着很不爽 本文 idea 版本为:idea 2020.3.1,以下操作均基于此版本进行 解决办法 1.去除警告 Settings>Editor>Inspections>S ...

  6. python的matplotlib.pyplot绘制甘特图

    博主本来就想简单地找一下代码,画一幅甘特图,结果百度之后发现甘特图的代码基本都不是用matplotlib库,但是像柱状图等统计图通常都是用这个库进行绘制的,所以博主就花了一些时间,自己敲了一份代码,简 ...

  7. 后端跨域问题究极解决 nginx+springboot 解决OPTIONS通过却报CORS的问题

    location /joinus { # 允许跨域请求的"域",有些请求不允许* add_header 'Access-Control-Allow-Origin' $http_or ...

  8. pytest配置文件pytest.ini

    说明: pytest.ini是pytest的全局配置文件,一般放在项目的根目录下 是一个固定的文件-pytest.ini 可以改变pytest的运行方式,设置配置信息,读取后按照配置的内容去运行 py ...

  9. Java基础(补充)

    为什么 Java 中只有值传递? 开始之前,我们先来搞懂下面这两个概念: 形参&实参 值传递&引用传递 形参&实参 方法的定义可能会用到 参数(有参的方法),参数在程序语言中分 ...

  10. synchronized已经不在臃肿了,放下对他的成见之初识轻量级锁

    前言 物竞天择,适者生存.JDK也在不断的优化中.关于JDK中synchronized锁内部也是不断的优化,前面我们分析了偏向锁用来解决初期问题,随着争抢的不断堆积轻量级锁营运而生. 关注我,一个不断 ...