keep alive可不可以缓存动态路由

Question

keep alive可不可以缓存动态路由，请教一下各位朋友

Answer 1

动态路由,页面缓存 keep-alive

<template>
 <keep-alive :include="cachedViews">
      <router-view :key="key" />
    </keep-alive>
</template>


<script>
export default {
  name: 'AppMain',
  components: {  },
  computed: {
    key() {
      if(JSON.stringify(this.$route.query) === '{}'){
        if(!(this.endWith(this.$route.path,"/edit")||this.endWith(this.$route.path,"/view")||this.endWith(this.$route.path,"/params")||this.$route.path=='/menu')&&!this.cachedViews.includes(this.$route.name)){
          this.cachedViews.push(this.$route.name)
        }
      }
      return this.$route.path
    }
  },
  watch: {
    $route() {
      if(JSON.stringify(this.$route.query) === '{}'){
        if(!(this.endWith(this.$route.path,"/edit")||this.endWith(this.$route.path,"/view")||this.endWith(this.$route.path,"/params")||this.$route.path=='/menu')&&!this.cachedViews.includes(this.$route.name)){
          this.cachedViews.push(this.$route.name)
        }
      }
    }
  },
  data() {
    return {
      cachedViews:[]
    }
  },
  methods:{
    endWith(str,endStr){
      let d = str.length - endStr.length;
      return (d >= 0&&str.lastIndexOf(endStr) == d)
    }
  }

}
</script>

include就是包含的组件需要缓存,是个数组
:include=“cachedViews”
//当route结尾, 不是 edit,view等
这里注意, 需要设置 要缓存的组件的 name: “XXX”