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实现的listview效果
Apr 28 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
Symfony控制层深入详解
2016/03/17 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python转换时间的图文方法
2019/07/01 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
selenium自动化测试入门实战
2020/12/21 Python
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
文化活动实施方案
2014/03/28 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2019通用版导游词范本!
2019/08/07 职场文书