Vue 2 中的 render()函数和 JSX 语法，根据`路由配置中meta`中的`keepAlive`属性，判断是否需要`keep-alive`

首先，通过解构赋值获取了 $route 和 $store 对象中的 meta 和 getters 属性。

然后，根据 meta.keepAlive 的值，判断是否需要使用 keep-alive 组件包裹 router-view 组件。如果需要，则创建一个 inKeep 元素，否则创建一个 notKeep 元素。

接下来，根据不同的条件，判断是否需要返回 inKeep 或 notKeep 元素。

最后，根据条件返回对应的渲染元素。

这段代码使用了 Vue 2 中的 render 函数和 JSX 语法。
在 Vue 2 中，使用 render 函数来手动渲染组件，而不是使用模板语法。同时，使用 JSX 语法可以更方便地创建组件的渲染元素。

<script>

export default {
  props: {
    keepAlive: {
      type: Boolean,
      default: true
    }
  },

  render() {
    const {
      $route: { meta },
      $store: { getters }
    } = this

    const inKeep = (
      <keep-alive>
        <router-view />
      </keep-alive>
    )

    const notKeep = <router-view />

    /*
      这里增加了`multiTab`的判断，
      当开启`multiTab`时，应缓存全部组件，否则会导致切换页面后页面还原成原始状态；
      若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
    */
    if (!getters.multiTab && !meta.keepAlive) {
      return notKeep
    }

    return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
  }
}

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40