Vue生命周期activated之返回上一页不重新请求数据

==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#Javascript

版权声明: 自由转载-署名-非商用

7条评论

提示:

评论会在审核通过后显示在下方

昵称必填,用于展示在评论中

邮箱必填,不会公开展示,方便及时收到回复

网址选填,方便看到的人去访问,请完整填写,例如(http://www.brandhuang.com)

item.from_uname重庆崽儿Brand
2020-01-08 08:17
item.from_unamevue粉丝
2020-01-08 08:03

对的,我也是用的事件总线,回调函数当时没写成箭头函数,改为箭头函数就赋值成功了,愉快😎

🐂

回复
item.from_unamevue粉丝
2020-01-08 08:03
item.from_uname重庆崽儿Brand
2020-01-06 13:20

我用到了eventBus,在下级页面的 destroyed 方法中调用 eventBus.$emit 方法传递数据,在上一级页面用 eventBud.$on 接收数据来赋值
🌚

对的,我也是用的事件总线,回调函数当时没写成箭头函数,改为箭头函数就赋值成功了,愉快😎

回复
item.from_uname重庆崽儿Brand
2020-01-06 13:20
item.from_unamevue粉丝
2020-01-06 11:58

楼主,我和你相同的需求,我在activated的函数中获取到了选择的新地址,也赋值给了地址栏,可是地址栏还是之前的默认地址?怎么回事?是因为缓存之后,不会数据更新了吗?还要做什么操作吗

我用到了eventBus,在下级页面的 destroyed 方法中调用 eventBus.$emit 方法传递数据,在上一级页面用 eventBud.$on 接收数据来赋值
🌚

回复
item.from_unamevue粉丝
2020-01-06 11:58

楼主,我和你相同的需求,我在activated的函数中获取到了选择的新地址,也赋值给了地址栏,可是地址栏还是之前的默认地址?怎么回事?是因为缓存之后,不会数据更新了吗?还要做什么操作吗

回复
item.from_uname111
2019-11-25 18:53

如果在多个页面开启缓存,经过只能以最新的页面缓存为准。意思就是不同的url,访问后缓存的内容时一样的

回复
item.from_uname重庆崽儿Brand
2019-05-28 15:44
item.from_unamenora
2019-05-27 14:07

你好,if (from.name == 'nextName')
这一句我没有理解,麻烦能解释一下吗?那个nextName是不是也是什么变量的值呢?

文章中有注释呢,是下一级页面的路由名字

回复
item.from_unamenora
2019-05-27 14:07

你好,if (from.name == 'nextName')
这一句我没有理解,麻烦能解释一下吗?那个nextName是不是也是什么变量的值呢?

回复
  • 1