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

首先,通过解构赋值获取了 $route$store 对象中的 metagetters 属性。

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

接下来,根据不同的条件,判断是否需要返回 inKeepnotKeep 元素。

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

这段代码使用了 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>

你可能感兴趣的:(Vue不常用,vue.js)