Vue.js分步编辑表单默认跳转至第二步个人信息页实现问题

开发者阿泽

2026-9-28

实现方案

步骤1：修改编辑按钮的路由跳转参数，新增step标记指定要跳转的步骤

// edit
b-button
  v-ripple.400="'rgba(113, 102, 240, 0.15)'"
  title="Edit"
  variant="outline-danger"
  class="btn-icon "
  :to="{ name: 'user-edit', params: { id: props.row.id }, query: { step: 2 } }"
 ></b-button>

步骤2：给form-wizard组件添加v-model绑定当前激活的步骤变量，该组件默认步骤索引从0开始，对应第一步「Account Details」的索引为0，第二步「Personal Info」的索引为1

<form-wizard
  color="#7367F0"
  :title="'User Setting'"
  :subtitle="'Setting the user by yourself'"
  finish-button-text="Submit"
  back-button-text="Previous"
  next-button-text="Next"
  class="wizard-vertical mb-3"
  @on-complete="formSubmitted"
  v-model="activeStep"
>
<!-- 其余tab-content代码保持不变 -->
</form-wizard>

步骤3：在编辑页的生命周期钩子中读取路由参数，给激活步骤变量赋值
以Vue3 Composition API为例：

import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
// 默认值为0，对应第一步
const activeStep = ref(0)

onMounted(() => {
  // 路由传入step=2时，设置激活步骤为1（对应第二步）
  if (route.query.step === '2') {
    activeStep.value = 1
  }
})

如果使用Vue2选项式API，写法如下：

export default {
  data() {
    return {
      activeStep: 0
    }
  },
  mounted() {
    if (this.$route.query.step === '2') {
      this.activeStep = 1
    }
  }
}