Vue3+Vue Router4中HTMLElement.click()致URL哈希后内容丢失问题

核心原因 #

这个问题和HTMLElement.click()本身无关，根源是按钮的默认浏览器行为触发了表单提交，导致URL哈希被清空：

• 如果你用的是原生<button>标签且没指定type="button"，浏览器会默认把它识别为type="submit"；
• 点击这类按钮时，会自动提交所在的表单，而表单默认提交动作会跳转到当前页面的「纯路径URL」（不带哈希部分），刚好和文件选择器弹出的时机重合，让你误以为是文件输入框的点击事件导致了路由变更。

具体修复方案 #

1. 给按钮指定type="button"

这是最常见的解决方式，直接阻止按钮的默认提交行为：

<template>
  <!-- 错误写法：默认是submit类型，会触发表单提交 -->
  <!-- <button @click="triggerFileInput">选择文件</button> -->

  <!-- 正确写法：明确指定按钮类型 -->
  <button type="button" @click="triggerFileInput">选择文件</button>
  <input ref="fileInput" type="file" style="display: none" @change="handleFile" />
</template>

<script setup>
import { ref } from 'vue'
const fileInput = ref(null)

const triggerFileInput = () => {
  fileInput.value?.click()
}

const handleFile = (e) => {
  const selectedFile = e.target.files[0]
  // 处理选中的文件逻辑
}
</script>

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

如果按钮必须放在<form>标签内，直接给表单添加阻止默认提交的指令：

<form @submit.prevent>
  <button @click="triggerFileInput">选择文件</button>
  <input ref="fileInput" type="file" style="display: none" />
</form>

3. 若使用<a>标签做按钮，阻止跳转行为

如果用<a>替代按钮，必须阻止其默认跳转动作：

<!-- 方式1：用prevent修饰符阻止默认行为 -->
<a @click.prevent="triggerFileInput">选择文件</a>

<!-- 方式2：设置无效href -->
<a href="javascript:void(0)" @click="triggerFileInput">选择文件</a>

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