Vue3 + Vite项目更新资源后出现localhost 404页面找不到问题

核心问题1：未阻止表单默认提交行为 #

你的<form>标签绑定了@submit="updateResource"，但没有阻止浏览器原生的表单提交行为。原生表单提交会刷新页面，且未指定action时会向当前URL发送请求，破坏Vue的hash路由结构（#/resource/xxx），导致页面跳转到不带hash的URL，进而出现404。

修复方式：
在@submit事件中添加.prevent修饰符阻止默认行为，同时移除多余的method="post"属性（你通过axios手动发送PUT请求，原生form的method设置无效）：

<form @submit.prevent="updateResource">

核心问题2：变量名混淆（请求逻辑隐患） #

代码中存在多处变量名错误：

• data里定义的是resource，但fetchResourceById方法里错误使用了this.release = null，应改为this.resource = null；
• updateResource方法里调用ResourceDataServices.update(this.release.id, this.release)，this.release未定义，需替换为this.resource。

修复后的方法代码：

methods: {
    fetchResourceById(id){
        this.resource = null             
        ResourceDataServices.get(id)
            .then(response => {
                this.resource = response.data;
            })
            .catch(e => {
                console.log(e);
            });
    },
    updateResource(){
        ResourceDataServices.update(this.resource.id, this.resource)
            .then(response => {
                this.resource = response.data;
            })
            .catch(e => {
                console.log(e);
            });
    }
}

次要问题：输入框样式类拼写错误 #

两个输入框的clas="form-control"应为class="form-control"，否则Bootstrap样式无法正常生效。

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