vue + vuex + router + keep-alive实现页面缓存,返回上一级到访问位置


需求背景: 用户访问网站路径为 [ 首页 → 商品详情页 → 首页 ], 此时需要缓存首页,再次返回到首页,需要展示到上次浏览的锚点位置

解决方案:

1:router + keep-alive

缺陷:一旦缓存后,无法销毁,占用内存

大致步骤:
1 路由meta中添加一个标识:
  meta: { title: '', isKeepAlive: true }
 
2 app.vue中使用keep-alive
 
  <keep-alive :max="10">
    <router-view v-if="$route.meta.isKeepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive" />
 
3 具体页面中通过 activated, deactivated钩子调用数据函数

2:router + keep-alive + vuex (推荐)

大致步骤:
 
1. vuex中设置需要缓存的组件名: keepAlivePage: []
 
 
2. app.vue
<keep-alive :include="keeplist" :max="10">
  <router-view></router-view>
</keep-alive>
 
<script>
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters({
        keeplist: 'getKeepAlivePage'
      })
    }
  }
</script>
 
 
3. store -> getters.js
const getters = {
  getKeepAlivePage: state => {
    return state.keepAlivePage
  }
}
export default getters
 
 
4. store -> mutation.js
 
const mutations = {
  // 缓存某个组件
  cache (state, name) {
    if (!state.keepAlivePage.includes(name)) {
      state.keepAlivePage.push(name)
    }
  },
 
  // 不缓存某个组件
  uncache (state, name) {
    if (state.keepAlivePage.includes(name)) {
      state.keepAlivePage = state.keepAlivePage.filter(item => item !== name)
    }
  }
}
 
 
5. router.js
const routeArry = [] // 路由
const router = new VueRouter({
  mode: 'history',
  routes: routeArry,
  // vue-router提供了scrollBehavior方法
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})
 
 
6. 准备工作完毕,接下来愉快的使用啦,以开头需求背景为例:home.vue
import { mapMutations } from 'vuex'
<script>
  created () {
    this.setKeepAlive('Home')
  },
  
  methods: {
   ...mapMutations({
     setKeepAlive: 'cache',
     delKeepAlive: 'uncache'
   })
  },
 
  beforeRouteLeave (to, from, next) {
    if (to.name !== 'goodsdetail') {
      this.delKeepAlive('Home')
    }
    next()
  }
</script>

划重点:delKeepAlive('Home') 和 setKeepAlive('Home') 中,传值一定是组件名称, 非路由name

大致思路:

进入页面,先将组件缓存下来;

通过beforeRouteLeave判断,是否为需求指定页面,如果是跳过,反之清除掉;

这样就可以及时销毁缓存啦~

声明:Jensonhui's blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - vue + vuex + router + keep-alive实现页面缓存,返回上一级到访问位置


Just do it.