vue-路由缓存-keep-alive

vue2.X vue-router 3.x

想实现的效果是 B => C C => B B 页面有缓存, A => B B 页面没缓存.

关键在于进入B页面之前, 要设置B 页面是不是缓存. 离开B页面

1. keep-alive include
2. 组件内守卫 beforeRouteLeave
3. vuex

// App.vue
<keep-alive :include="keepAlive">
            <router-view />
        </keep-alive>

A 页面
beforeRouteLeave(to, from, next) {
        console.log(to.name)
        if (to.name === 'b') { // 路由名
            // from.meta.keepAlive = true
            this.$store.commit('setKeepAlive', 'bb') // 这个是组件名
        } else {
            this.$store.commit('setKeepAlive', '')
        }
        next()
    },

B页面
export default {
    name: 'bb',
    beforeRouteLeave(to, from, next) {
        console.log(to.name)
        if (to.name === 'a') {
            this.$store.commit('setKeepAlive', '')
        } else {
            this.$store.commit('setKeepAlive', 'bb')
        }
        next()
    },
}

刚开始是在app.vue 监听$route 然后赋值 include 没有成功, 估计是, 路由发生变化才设置可能监听不到. 当然也可能是我犯了低级错误.