Vue 使用＜keep-alive include＞实现多级＜router-view＞缓存，无限层次缓存_keepalive include(1)

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

{
  path: 'json',
  name: 'json',
  meta: {
    ...
    keepAlive: true
    ...
  },
  component: () => import('../views/components/json')
},

使用 v-if 判断是否缓存

<keep-alive>
   <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>

这种方法是比较早版本时使用的方法，当时<keep-alive>还没有include属性。这个方法虽然方便，但是会带来很多bug，比如无法使用<transition>、缓存了不必要的，用来实现嵌套路由操作的<router-view>布局组件等。

然鹅，我有强迫症，不能接受没有动效 (￣(00)￣)

因此这里重点讲方法二（正在使用的）：

1.将路由元信息中包含keepAlive: true的路由记录下来，并将该路由的name属性为维护在使用vuex中的一个keepAliveList: []里。

2.使用<keep-alive>的include属性，来实现动态的组件缓存。

先说一下include属性，它的值可以是：字符串，正则表达式，数组

首先我们需要知道keep-alive可以根据include中的值来匹配当前路由对应组件的name属性（！！不是路由的name哦，是组件的name），来判断这个路由中的组件是否需要缓存。因此我们只需要将keepAliveList: []里保存的需要缓存的路由组件name数组传入include即可

因此使用起来就像这样

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

<script>
export default {
 name: 'index',
 data () {
 return {
 keepAliveList: this.$store.getters.getKeepAliveList,
 }
 },
 computed: {
 // 获取缓存列表
 getKeepAliveList () {
 return this.$store.getters.getKeepAliveList
 },
 key () {
 return this.$route.path
 }
 },
 watch: {
 getKeepAliveList (n, o) {
 this.keepAliveList = n
 }
 }
}
</script>

但是：

如果遇到嵌套的<router-view>或者嵌套路由（这是很常见的操作），这个时候后面几层<router-view>中的组件缓存会出问题

比如我有下面的三层结构：

 {
    path: '/menu-1',
    name: 'menu-1',
    // 布局文件 ，用来实现多层嵌套的 组件访问，对于多层次的路由访问来说，这是必须的
    component: layout,    
    children: [
      {
        path: 'menu-2',
        name: 'menu-2',
        component: layout,
        children: [
        {
          path: 'menu-3',
          name: 'menu-3',
          meta: {
            keepAlive: true
        },
        component: () => import('../views/components/menu-3.vue')
        }
      ]
    }
  ]
}

文件内容 layout.vue

<template>
   <router-view/>
</template>

<script>
export default {
 name: 'layout'
}
</script>

我想要访问menu-3，在路由之中可视化可以这么看 ( layout 写错了，淦 )：
在这里插入图片描述
我们可以发现，keep-alive只缓存到第一层，也就是<layout/>这个组件，而这个组件只是一个<router-view/>组件，这明显不是我们想要的。

我们需要把<layout/>这个无用的组件从<keep-alive> <router-view/> <keep-alive/>之中提出，
换句话说是将<menu-3/>提升到<keep-alive>能缓存的那一层，像这样
在这里插入图片描述

如何解决？

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

mage/format,png)

VUE组件库级组件封装-高复用弹窗组件