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

 

常规操作：

我们通常会将通过接口请求数据的方法放在==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) // 路由懒加载
    },

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

大功告成

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

感谢阅读

如有问题，欢迎留言指出，一起学习，一起进步