Vue Form Wizard表单提交后跳转至其他Vue页面的实现方案咨询

问题原因 #

你遇到的this.router undefined错误，是因为项目中未配置Vue Router，或者没有正确在组件中注入路由实例。

解决步骤 #

1. 配置Vue Router #

首先需要在项目中添加并配置Vue Router：

创建router.js文件：

import { createRouter, createWebHashHistory } from 'vue-router'
// 导入要跳转的目标页面组件（先创建好这个组件）
import SuccessPage from './components/SuccessPage.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./App.vue')
  },
  {
    path: '/success',
    name: 'Success',
    component: SuccessPage
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

2. 创建目标跳转页面 #

创建components/SuccessPage.vue组件：

<template>
  <div>
    <h2>表单提交成功！</h2>
    <p>这是跳转后的页面</p>
  </div>
</template>

3. 在main.js中挂载路由 #

修改main.js（若项目无此文件则创建）：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

4. 修改App.vue中的提交方法 #

现在可以在handleForm方法中正确使用路由跳转，Vue3组件内可通过this.$router访问路由实例：

<template>
    <h1>Vue 3 Form Wizard Demo</h1>
    <vue-form-wizard :form="wizardQuestions" v-model="formData" @submit="handleForm" />
</template>

<script>
import VueFormWizard from 'https://unpkg.com/@anivive/vue3-form-wizard@1.0.1/dist/index.umd.js';
import './index.css';
import wizardQuestions from './wizardQuestions.json';

export default {
  name: "App",
  components: {
    VueFormWizard
  },
  methods: {
    async handleForm(data) {
      console.log(data);
      // 模拟接口请求（替换为实际接口逻辑）
      try {
        // await axios.post('/api/submit', data);
        // 请求成功后跳转
        this.$router.push('/success');
      } catch (error) {
        console.error('提交失败:', error);
      }
    }
  },
  data() {
    return {
      formData: [],
      wizardQuestions: wizardQuestions
    };
  }
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

关键说明 #

• Vue3中必须先通过app.use(router)挂载路由，组件内才能通过this.$router访问路由实例
• 若使用<script setup>语法，需通过import { useRouter } from 'vue-router'获取路由实例：

  import { useRouter } from 'vue-router'
  const router = useRouter()
  // 执行跳转
  router.push('/success')
  

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