vue-router 嵌套component 禁止重新渲染

在 Vue.js 中，如果一个组件被多个路由所匹配，那么它将会渲染多次。这可能会导致性能问题，因为每个组件实例都需要执行它们的生命周期钩子、创建调用 render 函数等。如果我们希望在嵌套路由中禁止重新渲染组件，可以使用 `<keep-alive>` 组件来缓存组件状态避免多次渲染。

具体操作如下：

1. 在路由配置中添加 `meta` 属性，用于标记需要缓存的组件：

{
  path: '/home',
  component: Home,
  meta: {
    keepAlive: true // 缓存组件
  }
}

2. 在组件模板中使用 `<keep-alive>` 组件包裹需要缓存的组件：

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

这里的 `v-if` 判断用于区分需要缓存的组件和不需要缓存的组件，不需要缓存的组件会重新渲染。通过这种方式，我们可以在嵌套路由中禁止组件重新渲染，提升应用性能。