关于如何在 Vue 中将表单拆分为多个“页面”/“选项卡”的建议？

Question

我是 Vue 开发的新手，我希望针对我正在尝试解决的问题获得一些建议或更好的解决方案。

目前我正在尝试构建一个向导工具，它可以采用一种跨越多个页面的形式（在向导内）。我希望它的行为方式类似于：

  <myWizard>
    <form>
      <myPage>
        <label />
        <input/>
      </myPage>
      <myPage>
        <label />
        <input/>
      </myPage>
    </form>
  </myWizard>

我的主要问题基本上是因为它是一个我不知道/知道<myWizard> 标签之间的工具，因为它取决于使用该工具的人。

我已经有了一个基本设置，可以使用 BootStrap 将内容呈现到单独的选项卡（页面）中，但想知道将表单内容分离到不同页面的最佳方法是什么。

例如，是否可以使用<slot> 接收<myWizard> 标记之间的所有内容，然后让 myPage 成为另一个组件，允许我在向导中将它们之间的内容呈现到单独的页面中？

虽然这样做并尝试识别插槽内的“标签”/“组件”似乎非常迂回，我还没有专门研究过。

感谢您提供的任何建议。

Answer 1

你可以这样做：

// router.js
const vueRoutes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
(...)
  {
    path: '/wizard',  // Define main route for the form
    name: 'wizard',
    component: AppWizard,
    children: [
      {
        path: 'page1',
        name: 'page1',
        component: FormPart1, // If the route is '/wizard/page1' it will render the FormPart1 component
      },
      {
        path: 'page2',
        name: 'page2',
        component: FormPart2, // If the route is '/wizard/page2' it will render the FormPart2 component
      }
    ],
  },
(...)
]

// AppWizard.vue
<template>
  <my-wizard>
    <form>
      <router-view>
    </form>
  </my-wizard>
</template>

// FormPart1.vue
<template>
  <fieldset>
    <label1/>
    <input1>
    <label2/>
    <input2>
  </fieldset>
</template>


// FormPart2.vue
<template>
  <fieldset>
    <label3/>
    <input3>
    <label4/>
    <input4>
  </fieldset>
</template>

当然，您可以随意将wizard/page1 替换为pages/1 或其他任何东西。