利用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. linux 中 /dev/null和/dev/zero的作用以及区别

    在类Unix操作系统中,设备节点并不一定要对应物理设备.没有这种对应关系的设备被称之为伪设备.操作系统运用了它们实现多种多样的功能,/dev/null和/dev/zero就是这样的设备,类似的还有/d ...

  2. 记录一次docker容器内修改my.cnf配置文件max_allowed_packet参数的过程

    1. 问题背景 在一次新版本功能开发完毕,配合测试的过程中,测试反馈某个XxlJob定时任务一直执行失败,在分析了日志之后,找到了报错的原因: Packet for query is too larg ...

  3. mysql更改my.ini配置文件以后mysql服务无法启动

    最近在调试mysql时,更改了mysql的端口以后发现,mysql怎么改都启动不了,从其它机器重新复制一个my.ini文件就可以启动,这是由于一般用记事本打开配置文件同时更改的ini的格式,我们需要重 ...

  4. [树]LeetCode589 N叉树的前序遍历

    LeetCode N叉树的前序遍历 前言:树的前中后序遍历已经是很经典的题目的,要么递归要么迭代,不过还是比较习惯于递归的写法 TITLE 给定一个 n 叉树的根节点 root ,返回 其节点值的 前 ...

  5. 【elasticsearch】搜索过程详解

    elasticsearch 搜索过程详解 本文基于elasticsearch8.1.在es搜索中,经常会使用索引+星号,采用时间戳来进行搜索,比如aaaa-*在es中是怎么处理这类请求的呢?是对匹配的 ...

  6. luoguP5319 [BJOI2019]奥术神杖(分数规划,AC自动机DP)

    luoguP5319 [BJOI2019]奥术神杖(分数规划,AC自动机DP) Luogu 题解时间 难点在于式子转化,设有c个满足的子串,即求最大的 $ ans = \sqrt[c]{\prod_{ ...

  7. C++设计模式 - 总结

    一个目标:管理变化,提高复用 掌握设计模式一个核心目标:管理变化,提高复用.在使用设计模式中发现并没有实现复用,这就和设计初衷相违背了,说明代买写的不好. 两种手段:分解VS.抽象 在代码设计中,该开 ...

  8. KestrelServer详解[1]:注册监听终结点(Endpoint)

    具有跨平台能力的KestrelServer是最重要的服务器类型.针对KestrelServer的设置均体现在KestrelServerOptions配置选项上,注册的终结点是它承载的最重要的配置选项. ...

  9. 关于Oracle数据库的PIVOT分组函数的使用

    官方文档挺详细的,在新功能那里有介绍到:http://www.oracle-developer.net/display.php?id=506 PIVOT的语法:https://docs.oracle. ...

  10. Log4j使用(转)

    from:http://www.cnblogs.com/ITtangtang/p/3926665.html 一.Log4j简介Log4j有三个主要的组件:Loggers(记录器),Appenders ...