vue 实现返回上一页不请求数据keep-alive

 

常规操做：

咱们一般会将经过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用。

可是咱们知道，无论是咱们刚进入这个页面仍是从其余页面返回这个页面，这些生命周期都会走一遍。

问题：

因此，即便你跳转到下级页面选好你所需的数据返回上一页时，你所回填的数据又被从接口请求回来的数据给覆盖了。。。，这并非咱们想要的效果！！！

使用keep-alive

不想让页面加载数据？？？固然能够，这时候==Keep-alive==登场了

 

vue2.0提供了一个keep-alive组件用来缓存组件,避免屡次加载相应的组件,减小性能消耗

一、缓存全部页面

若是你想缓存全部的页面，只须要修改下app.vue中的代码便可

// app.vue
    <template>
      <div id="app">
        <keep-alive >
          <router-view></router-view>
        </keep-alive>
        <tabBar/>
      </div>
    </template>

二、缓存部分页面

若是你想缓存部分页面，有两种方式：

(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) // 路由懒加载
    },

3、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>

大功告成

这样就实现了：从其余页面跳转到这个页面时会请求数据，当从下级页面返回这个页面时就不会从新请求数据

感谢阅读

若有问题，欢迎留言指出，一块儿学习，一块儿进步