Vue 3.x 表单提交后vue-router跳转异常问题咨询

1. 修正路由跳转写法 #

你使用的this.$router.push('Home')属于错误用法：

• 当push方法传入字符串参数时，会将参数作为路由路径进行匹配，你的路由配置中没有定义/Home路径，自然跳转无响应
• 如需通过路由名称跳转，要传入对象格式参数，或者直接写匹配的路径：

// 按路由名跳转写法
this.$router.push({name: 'Home'})
// 直接匹配根路径写法更简洁
this.$router.push('/')

如果你的组件使用Vue3的<script setup>组合式API写法，不存在this指向，需要先导入路由实例再调用：

import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转时调用
router.push('/')

2. 阻止表单默认提交行为 #

表单默认的提交逻辑会触发整页重载、向服务器发送请求，这是你之前跳转必须访问服务器的核心原因，需要在handleSubmit方法开头阻止默认行为：

handleSubmit(event) {
  // 第一行先添加阻止默认事件代码
  event.preventDefault()
  let form = event.target;
  if (form.checkValidity()) {
    // 用路由跳转替换原window.location.href写法
    this.$router.push('/')
  }
  this.wasValidated = true
}

3. 排查根组件路由出口配置 #

如果修改后仍出现地址变化但页面内容不更新的问题，检查App.vue根组件中是否正确添加了<router-view />标签，这个标签是路由匹配组件的渲染容器，缺失的话路由跳转不会渲染对应内容：

<template>
  <!-- 其他全局布局代码 -->
  <router-view /> <!-- 必须保留该标签 -->
</template>

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