Vue生命周期activated之返回上一页不重新请求数据操作


Posted in Javascript onJuly 26, 2020

activated: 英文原意:使活动、触发

在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个)

一、需求

前不久在项目中有这样一个需求:

在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置

二、尝试

常规操作:

我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用。

但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面,这些生命周期都会走一遍。

问题:

所以,即使你跳转到下级页面选好你所需的数据返回上一页时,你所回填的数据又被从接口请求回来的数据给覆盖了。。。,这并不是我们想要的效果!!!

三、使用keep-alive

不想让页面加载数据???当然可以,这时候==Keep-alive==登场了

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

1、缓存所有页面

如果你想缓存所有的页面,只需要修改下app.vue中的代码即可

// app.vue
 
  <template>
   <div id="app">
    <keep-alive >
     <router-view></router-view>
    </keep-alive>
    <tabBar/>
   </div>
  </template>

2、缓存部分页面

如果你想缓存部分页面,有两种方式:

(1)使用router.meta属性

app.vue

// app.vue
 
  <template>
   <div id="app">
    <keep-alive >
     <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <tabBar/>
   </div>
  </template>

router.js

{
   path: '/usermanage',
   name: 'usermanage',
   meta: {
    keepAlive: true, //该字段表示该页面需要缓存
   },
   component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
  },

(2)使用vue-router 2.0的新特性

2.0提供了include/exclude两个属性 可以针对性缓存相应的组件

app.vue

<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>

==注意==:上面代码中的a,b是需要缓存的组件的name属性值,不是路由的name值

使用keep-alive结论

当你第一进入需要缓存的页面后,页面数据被缓存下来,但是当你再次进入时,你会发现,页面的数据还是之前的数据。。。。这也不是我们想要的效果!!!!

四、activated配合keep-alive

首先,我们需要使用router.meta属性,修改需要缓存的组件路由如下

// keepAlive和isback这两个很重要!
{
   path: '/usermanage',
   name: 'usermanage',
   meta: {
    keepAlive: true, //该字段表示该页面需要缓存
    isBack: false, //用于判断上一个页面是哪个
    title: '人员管理'
   },
   component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
  },

然后修改需要缓存的组件中的代码(只放重点部分):

<script>
 export default {
  name: 'currentName',
  data() {
   return {
  
    isFirstEnter: false, //
   }
  },
  beforeRouteEnter(to, from, next) {
   if (from.name == 'nextName') { // 这个name是下一级页面的路由name
    to.meta.isBack = true; // 设置为true说明你是返回到这个页面,而不是通过跳转从其他页面进入到这个页面
   }
   next()
  },
  mounted() {
   
  },
  activated() {
   if (!this.$route.meta.isBack || this.isFirstEnter) {
    this.initData() // 这里许要初始化dada()中的数据
    this.getDataFn() // 这里发起数据请求,(之前是放在created或者mounted中,现在只需要放在这里就好了,不需要再在created或者mounted中请求!!)
   }
   this.$route.meta.isBack = false //请求完后进行初始化
   this.isFirstEnter = false;//请求完后进行初始化
  },
 }
</script>

大功告成

这样就实现了:从其他页面跳转到这个页面时会请求数据,当从下级页面返回这个页面时就不会重新请求数据

以上这篇Vue生命周期activated之返回上一页不重新请求数据操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 #Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 #Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 #Javascript
vuex分模块后,实现获取state的值
Jul 26 #Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 #Javascript
全面解析JavaScript Module模式
Jul 24 #Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php实现的RSS生成类实例
2015/04/23 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
java必学必会之static关键字
2015/12/03 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
python django 增删改查操作 数据库Mysql
2017/07/27 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python爬虫增加访问量的方法
2019/08/22 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
奥巴马胜选演讲稿
2014/05/15 职场文书
服务宗旨标语
2014/07/01 职场文书
观看信仰心得体会
2014/09/04 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
文明倡议书
2015/01/19 职场文书