Vue3+Vue Router4如何同页显示列表与表单并保留列表状态

现有路由结构没法直接实现你的需求——切换到/projects/create时，父组件的<router-view>会把ProjectList替换成ProjectForm，ProjectList组件会被销毁，自然丢失滚动位置这类状态。你之前尝试在create组件里引入列表，本质是每次进入create路由都会新建一个ProjectList实例，肯定会刷新，没法保留原有状态。

给你两个可行的解决思路：

思路一：调整路由结构，用弹窗式组件配合Teleport #

把create路由改成非嵌套的独立路由，同时让Project组件始终渲染ProjectList，通过路由判断来控制表单弹窗的显示：

1. 修改路由配置：

{
  path: '/projects',
  component: Project,
  children: [
    {
      alias: '',
      path: 'list',
      component: () => import('@/views/ProjectList.vue'),
    }
  ]
},
{
  path: '/projects/create',
  component: () => import('@/views/Forms/ProjectForm.vue'),
  meta: { isProjectModal: true }
}

2. 在Project组件里，监听路由变化，用<Teleport>把表单渲染到页面顶层，实现覆盖效果：

<template>
  <div class="project-container">
    <router-view /> <!-- 始终渲染ProjectList -->
    <!-- 当路由匹配/projects/create时显示表单弹窗 -->
    <Teleport to="body" v-if="$route.path === '/projects/create'">
      <ProjectForm @close="$router.push('/projects')" />
    </Teleport>
  </div>
</template>

这样ProjectList始终留在DOM中，滚动位置等状态完全保留，表单只是以弹窗形式覆盖在上方，关闭时切回列表路由即可。

思路二：放弃路由切换，用组件内状态控制弹窗 #

如果不需要把create状态暴露在URL里，直接在ProjectList组件里加一个弹窗状态，点击按钮时打开ProjectForm：

<template>
  <div class="project-list">
    <!-- 列表内容 -->
    <button @click="showCreateForm = true">新建项目</button>
    
    <ProjectForm 
      v-if="showCreateForm" 
      @close="showCreateForm = false"
      class="modal-overlay"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showCreateForm = ref(false)
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

这种方式最直接，完全不涉及路由，列表状态肯定不会丢失，适合不需要通过URL分享新建页面的场景。

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