前进刷新后退缓存及第一次缓存无效

A—>B—>C

A到B刷新,C到B缓存

App.vue里的代码字段


  

export default {
  name: 'App',
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods:{
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    }
  }
}

B页面组件代码段

export default {
  inject: ['reload'],
  beforeRouteEnter(to, from, next) {
    to.meta.keepAlive = true
    if (from.path !== '/evaluation/C') {
      next(vm => vm.reload())
    } else {
      next()
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === '/evaluation/C') {
      from.meta.keepAlive = true
      next()
    } else {
      from.meta.keepAlive = false
      next()
    }
  }
}

配置B页面路由时,加个meta,设置keepAlive: true。

你可能感兴趣的:(vue,router,缓存,vue.js)