美文网首页Vue.js
vue页面缓存,keep-alive第一次无效的解决方法

vue页面缓存,keep-alive第一次无效的解决方法

作者: 小虾米前端 | 来源:发表于2020-12-29 16:48 被阅读0次

    方法二:使用 include + beforeRouteLeave + vuex 与方法一相似,不同的地方在于,将需要缓存的组件保存到全局变量,可以在路由的钩子函数里灵活的控制哪些组件需要缓存,那些不需要缓存;跟方法一相比,不需要每次再重新初始化数据,但是需要在vuex中保存数据;

    1、在创建router实例的时候加上scrollBehavior方法

    export default new Router({
      routes,
      scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
          return savedPosition
        } else {
          return {
            x: 0,
            y: 0
          }
        }
      }
    })
    

    2、将需要缓存的组件加在include属性里

    <keep-alive :include="catch_components">
          <router-view></router-view>
    </keep-alive>
    

    3、在store里加入需要缓存的的组件的变量名,和相应的方法;

    export default new Vuex.Store({
      state: {
        catch_components: []
      },
    mutations:{
        GET_CATCHE_COMPONENTS (state, data) {
          state.catch_components = data
        }
    }
    })
    

    4、在beforeRouteLeave钩子函数里控制需要缓存的组件

    beforeRouteLeave (to, from, next) { //要在离开该组件的时候控制需要缓存的组件,否则将出现第一次不缓存的情况
        this.busy = true
        if (to.path === '/goods_detail') { // 去往详情页的时候需要缓存组件,其他情况下不需要缓存
          this.$store.commit('GET_CATCHE_COMPONENTS', ['home']) //注意,'home'将匹配首先检查组件自身的 name 选项(非router.js里的),如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
        } else {
          this.$store.commit('GET_CATCHE_COMPONENTS', [])
        }
        next()}
    

    相关文章

      网友评论

        本文标题:vue页面缓存,keep-alive第一次无效的解决方法

        本文链接:https://www.haomeiwen.com/subject/jpfqoktx.html