vue-router之keep-alive

网址：https://www.cnblogs.com/ljx20180807/p/9810480.html

 

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染Dom.

 

目的：

vue-cli 构建的vue 单页面应用，某些特定的页面，实现前进刷新，后退不刷新。

 

注意：

    此处的刷新特指当进入此页面时，出发ajax/axios请求，向服务器获取数据。

    不刷新特指当进入此页面时，不出发ajax/axios 请求，而是使用之前缓存的数据，以便减少服务器请求，用户体验更流畅。

 

实现思路：

用 keep-alive 及 scrollBehavior 完美解决。

1、在app.vue文件中，给路由加上 keep-alive

<template>
  <div id="app">
    <keep-alive>
     <!-- 使用缓存的视频组件 keepAlive true：需要被缓存 false：不需要缓存 -->
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不使用缓存的视频组件 keepAlive true：需要被缓存 false：不需要缓存 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2、在router/index.js 中添加 路由元信息，设置需要缓存的页面

routes: [
    {
      path: "/",
      name: "home",
      component: () => import("@/pages/tabBar/home"), //首页
      meta: {
        keepAlive: true, // 判断组件是否需要被缓存 true：需要被缓存 false：不需要缓存
        isKeepAlive: false // 用户判断上一级页面是哪个
      }
    },
    {
      path: "/assets",
      name: "assets",
      component: () => import("@/pages/tabBar/assets"), //资产
      meta: {
        keepAlive: true, // 判断组件是否需要被缓存 true：需要被缓存 false：不需要缓存
        isKeepAlive: false // 用户判断上一级页面是哪个
      }
    }
]

3、然后在需要的页面进行设置 如 home.vue

export default {
  data () {
    return {
      isFirstEnter:false,
    }
  },
  created () {
    this.isFirstEnter = true;
  },
  activated() {
    // 只有第一次进入或者刷寻页面后才会执行此钩子函数
    if(!this.$route.meta.isKeepAlive || this.isFirstEnter){
      // 如果isKeepAlive是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
      this.getData(); // 获取首次刷新数据
    }
    // 恢复成默认的false，避免isKeepAlive一直是true，导致下次无法获取数据
    this.isFirstEnter = false;
    this.$route.meta.isKeepAlive = false
  },
  beforeRouteEnter(to, from, next) {
    // 判断是哪个页面跳转，判断争取表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可
    if (from.name == "assets") {
      to.meta.isKeepAlive = true;
    }
    next();
  },
}