如何在Vue.js应用中实现PrimeVue Steps组件并关联自定义路由页面

按照以下步骤调整即可正常运行：

1. 配置嵌套路由表 #

你已经引入了Vue Router，但没有在路由配置中关联步骤路径和对应的自定义组件，且承载Steps的页面需要作为父路由，步骤组件作为它的子路由才能匹配当前代码里的<router-view>。
找到你的router/index.js（如果没有就新建该文件），添加如下配置：

import { createRouter, createWebHistory } from 'vue-router'
// 引入承载Steps的父组件（就是你贴的带Steps的那个组件，假设文件名是StepsLayout.vue）
import StepsLayout from '../views/StepsLayout.vue'
// 引入各个步骤自定义组件
import PersonalInformation from '../views/PersonalInformation.vue'
import Seat from '../views/Seat.vue'
import Payment from '../views/Payment.vue'
import Confirmation from '../views/Confirmation.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: StepsLayout,
      // 子路由对应各个步骤，会渲染到StepsLayout里的<router-view>
      children: [
        {
          path: '', // 默认重定向到第一个步骤
          redirect: '/PersonalInformation'
        },
        {
          path: 'PersonalInformation',
          component: PersonalInformation
        },
        {
          path: 'seat',
          component: Seat
        },
        {
          path: 'payment',
          component: Payment
        },
        {
          path: 'confirmation',
          component: Confirmation
        }
      ]
    }
  ]
})

export default router

2. 调整Steps组件配置（可选） #

你当前给Steps加了:readonly="true"，这个属性会禁止点击步骤条跳转，如果需要支持点击跳转，把属性值改成false即可。如果不需要点击跳转，上面路由配置里的redirect已经处理了初始页自动跳转到第一个步骤的逻辑。

3. 确认子组件事件触发逻辑 #

父组件通过监听prevPage、nextPage、complete事件切换步骤，你需要在每个子步骤组件里正确触发对应的事件，以PersonalInformation.vue为例：

<template>
  <div class="step-content">
    <!-- 你的表单内容 -->
    <InputText v-model="formData.firstname" placeholder="名" />
    <InputText v-model="formData.lastname" placeholder="姓" />
    
    <div class="btn-group">
      <Button label="下一步" @click="handleNext" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  emits: ['nextPage'], // 声明要触发的事件
  props: ['formData'], // 接收父组件传的公共表单数据
  setup(props, { emit }) {
    const formData = ref({
      firstname: props.formData.firstname || '',
      lastname: props.formData.lastname || ''
    })

    const handleNext = () => {
      // 触发nextPage事件，传入当前步骤索引（第一个步骤索引是0）和表单数据
      emit('nextPage', {
        pageIndex: 0,
        formData: formData.value
      })
    }

    return { formData, handleNext }
  }
}
</script>

其余步骤组件按这个逻辑修改，上一步按钮触发prevPage事件，最后一步提交触发complete事件即可。

4. 检查路径大小写一致性 #

注意你配置的to: "/PersonalInformation"要和路由里的path、组件文件名大小写保持一致，Windows系统大小写不敏感，但部署到Linux服务器会区分大小写，建议统一路径名小写，比如/personal-information更规范。

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