vue实现前进刷新后退不刷新效果

github源码地址：https://github.com/ichanghe/keep_alive

欢迎star

---

目标：

1. 在页面中，第一次进入的时候，请求获取数据。
2. 点击某个子页面，跳到相应页面，再从详情页后退回到列表页时，不刷新数据。

可以理解为 a->b->c ，

• a进入b页面查询数据，
• b进入c页面查询数据，
• c进入b页面读缓存
• b进入a页面读缓存

 方法实现：

在 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>
  </div>
</template>

export default new Router({
  mode: "hash",
  routes: [
    {
      path: "/",
      name: "A",
      component: Apage,
      meta:{
        keepAlive: true,
        useCache:false
      }
    },
    {
      path: "/bpage",
      name: "B",
      component: Bpage,
      meta: {
        keepAlive: true,
        useCache:false
      }
    },
    {
      path: "/cpage",
      name: "C",
      component: Cpage,
      meta:{
        keepAlive: true,
        useCache:false
      }
    }
  ]
});

在a页面使用activated 和 beforeRouteEnter钩子函数，当页面从b或c页面进入，就读内存；如果不是就加载数据

  activated() { 
    if(!this.$route.meta.useCache){
      this.onLoad(); // 这是我们获取数据的函数
    }else{
      console.log('此时我们读缓存')
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'B'||from.name === 'C') {
      //判断是从哪个路由过来的，若是detail页面不需要刷新获取新数据，直接用之前缓存的数据即可
      to.meta.useCache = true
    }
    next()
  },

在b页面分别使用activated 和 beforeRouteEnter钩子函数，判断是从a页面进入，会调用this.onLoad方法；从c页面进入，读缓存

  activated() { 
    if(!this.$route.meta.useCache){
      this.onLoad(); // 这是我们获取数据的函数
    }else{
      console.log('此时我们读缓存')
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'C') {
      //判断是从哪个路由过来的，若是detail页面不需要刷新获取新数据，直接用之前缓存的数据即可
      to.meta.useCache = true
    }
    next()
  },

在c页面使用activated，因为只有c页面永远需要查询数据

  activated() {      
    this.onLoad(); // 这是我们获取数据的函数
  },