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 arguments 多参传值函数
Oct 24 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
牡丹941资料
2021/03/01 无线电
用PHP实现小型站点广告管理
2006/10/09 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python实现Flappy Bird源码
2018/12/24 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
python如何调用字典的key
2020/05/25 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
小学生评语大全
2014/04/18 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
初中政教处工作总结
2015/08/12 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL