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 数值型和字符串型之间的转换
Jul 25 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
使用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
如何删除多级目录
2006/10/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP 简单日历实现代码
2009/10/28 PHP
解析php类的注册与自动加载
2013/07/05 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python for循环与getitem的关系详解
2020/01/02 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Django url 路由匹配过程详解
2021/01/22 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
安全资金保障制度
2014/01/23 职场文书
房产协议书范本2014
2014/09/30 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
环卫工作个人总结
2015/03/04 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers