Vue路由跳转全局组件重复渲染及Nuxt嵌套路由配置问题

首先，咱们先搞清楚为什么你的area-wrapper会在路由跳转时重新渲染——这其实是Vue路由的默认行为。每个路由页面（比如pages/app/_appId.vue）都是独立的组件实例，当你从/app/112跳转到/app/11时，虽然只是路由参数appId变化，但整个页面组件会被销毁后重新创建，作为页面子组件的area-wrapper自然也跟着重新渲染了，这完全是预期行为。

接下来，针对你的需求（复用类似Layout的共享组件、支持不同页面传入不同<menu/>、避免重复渲染），给你几个可行的解决方案：

方案1：用嵌套路由实现组件复用（推荐） #

你之前尝试嵌套路由遇到了Nuxt路由生成异常，大概率是页面结构或nuxt-i18n配置没调整对，咱们一步步来：

步骤1：调整页面目录结构 #

遵循Nuxt的嵌套路由规范来组织页面：

pages/
├── app/
│   ├── _appId.vue       # 父路由组件：放置area-wrapper
│   └── _appId/
│       ├── index.vue     # 子路由：对应/app/:appId的默认内容
│       └── [其他子页面].vue  # 比如settings.vue对应/app/:appId/settings

步骤2：编写父路由组件_appId.vue #

在父组件里封装area-wrapper，用<nuxt-child/>承载页面自定义内容：

<template>
  <area-wrapper>
    <nuxt-child />
  </area-wrapper>
</template>

<script>
export default {
  // 监听路由参数变化，动态更新menu配置
  watch: {
    '$route.params.appId'(newId) {
      // 根据新的appId更新menu的数据源或组件逻辑
      this.$emit('update-menu', newId)
    }
  }
}
</script>

这样跳转路由时，父组件_appId.vue会被复用（不会销毁重建），只有<nuxt-child/>对应的子页面会更新，area-wrapper自然不会重复渲染。

步骤3：修复nuxt-i18n路由生成问题 #

你提到生成的路由有重复路径（比如/:entity/messaging/messaging），可以尝试这些调整：

• 在nuxt.config.js的i18n配置中，确保parsePages: true（默认开启，但自定义路由时需检查）；
• 避免子路由目录下出现和父路由同名的文件（比如父路由是messaging.vue，子目录用index.vue作为默认页，不要用messaging.vue）；
• 如果有自定义路由规则，确保没有覆盖嵌套路由的父路径配置。

方案2：自定义Layout并添加插槽 #

如果嵌套路由不适合你的场景，可以给自定义Layout添加插槽来传递不同的menu：

步骤1：创建自定义Layout #

在layouts/app-layout.vue中编写：

<template>
  <div>
    <area-wrapper>
      <!-- 用于传递自定义menu的插槽 -->
      <template #menu>
        <slot name="menu" />
      </template>
      <!-- 页面内容插槽 -->
      <slot />
    </area-wrapper>
  </div>
</template>

步骤2：在页面组件中使用该Layout #

每个页面可以传入专属的<menu/>组件：

<template>
  <!-- 传入当前页面的menu -->
  <template #menu>
    <app-specific-menu :app-id="$route.params.appId" />
  </template>
  
  <!-- 页面自定义内容 -->
  <div class="app-content">...</div>
</template>

<script>
export default {
  // 指定使用自定义Layout
  layout: 'app-layout'
}
</script>

Layout组件在路由切换时默认是复用的（除非页面指定了不同Layout），因此area-wrapper不会重复渲染，同时每个页面都能传入独立的menu。

方案3：用keep-alive缓存组件 #

如果以上两种方案都不适用，还可以用Vue的keep-alive缓存area-wrapper：

<template>
  <keep-alive :key="$route.params.appId">
    <area-wrapper>
      <!-- 页面内容 -->
    </area-wrapper>
  </keep-alive>
</template>

这里给keep-alive加了动态key，确保不同appId对应不同的缓存实例，避免menu内容混乱。不过这种方案可能带来额外的状态管理问题，建议优先用前两种方案。

内容的提问来源于stack exchange，提问作者Jujubes