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

最新推荐文章于 2024-08-20 14:02:59 发布

qq_41737172

最新推荐文章于 2024-08-20 14:02:59 发布

阅读量736

点赞数

文章标签： vue 前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_41737172/article/details/127122746

版权

<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”