Vue中如何在同一页面显示两个视图？

Question

假设我有一个显示表格列表的视图和一个显示表单的视图，路线如下：

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

理想情况下，当用户单击列表上的按钮时，我希望表单覆盖列表，以便将表格保留在背面。但是当我在项目视图上使用路由器视图并按下创建视图时，仅显示创建视图。

我尝试将两个组件放入创建中，但是当我按下创建时，后面的表格会刷新并且不会停留在同一位置。使用上述路由样式，是否可以在保留列表的列表状态的同时显示表单和列表？或者我应该改变路由器的风格？我正在使用 Vue3 和 Vue Router4

Answer 1

我建议将 ProjectList 和 Project 表单转换为 /components，然后您可以拥有一个 /view ProjectView，其中包含两者，并且您可以按照您的描述在其中切换打开状态。

在我看来，您将视图视为组件。

如果您在登陆 ProjectView 时需要显示或隐藏其中之一，您可以使用 useRoute 可组合项（Vue 3，组合 API）通过路由参数来管理它：

   <script setup>
    import { useRoute } from 'vue-router'
    import { ref, watch } from 'vue'
    
    const route = useRoute()
    const userData = ref()
    
    watch(
      () => route.params.id,
         // Do something here!
    )
    </script>

对于其余的，当它们已经在页面上时，您只需要一些按钮来显示或隐藏其中一个。

托马斯