Vue组件渲染问题咨询：Profile下Post列表如何切换渲染单条Post详情

优先选择根据路由/状态参数动态渲染对应组件的方案，不建议直接硬替换Posts组件，理由如下：

• 保留组件层级的逻辑复用性：原有的profile页friends、followers、Posts的切换逻辑不需要重构，你只需要在Posts组件的作用域内做动态渲染即可，不需要动上层profile组件的已有逻辑
• 便于做回退交互：用户看完单帖详情要回到帖子列表时，直接清空帖子id参数就能自动切回列表渲染，不需要额外做组件的挂载/卸载逻辑，还能天然保留列表之前的滚动位置、分页状态等，用户体验更好
• 更符合组件解耦原则：单帖详情组件不需要感知上层profile的上下文，只需要接收传入的pk参数拉取对应数据即可，后续你要把单帖详情抽到其他页面复用也不用改代码

你可以在Posts组件内加一个判断逻辑：

<template>
  <!-- 有传入的帖子id参数时渲染单帖详情 -->
  <PostDetail v-if="currentPostPk" :pk="currentPostPk" />
  <!-- 无参数时渲染原有帖子列表 -->
  <div v-else class="post-list">
    <div v-for="post in postList" :key="post.pk" @click="openPostDetail(post.pk)">
      {{ post.content }}
    </div>
  </div>
</template>

参数可以根据需求任选存储位置：

• 放在路由的query参数里，比如/profile?postId=123，直接通过$route.query.postId获取，适合需要支持单帖直接通过链接访问的场景
• 放在profile组件的状态里，通过props传给Posts组件，适合不需要外链访问单帖的内部场景

只有当你需要完全隐藏其他tabs（friends、followers）、单帖详情需要占满整个profile内容区的时候，才考虑在上层profile组件做动态组件切换，逻辑如下：

<template>
  <div class="profile-page">
    <ProfileHeader />
    <TabNav @change="changeActiveTab" />
    <component :is="activeComponent" :post-pk="currentPostPk" />
  </div>
</template>

当激活单帖详情时，把activeComponent设为PostDetail即可。

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