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 相关文章推荐
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
JavaScript 函数的执行过程
May 09 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php获取excel文件数据
2017/04/21 PHP
调试php程序的简单步骤
2019/10/04 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
django使用html模板减少代码代码解析
2017/12/12 Python
python scatter函数用法实例详解
2020/02/11 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
办理生育手续介绍信
2014/01/14 职场文书
清洁工岗位职责
2014/01/29 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL
java版 联机五子棋游戏
2022/05/04 Java/Android