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 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
vue自定义filters过滤器
Apr 26 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
js实现的订阅发布者模式简单示例
Mar 14 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
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python实现自动打卡的示例代码
2020/10/10 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
应付会计岗位职责
2013/12/12 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
投资合作协议书范本
2014/04/17 职场文书
物业管理专业求职信
2014/06/11 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
施工员岗位职责范本
2015/04/11 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
MySQL优化及索引解析
2022/03/17 MySQL