.prevent修饰符用于阻止事件默认行为，等价于event.preventDefault()，常见于表单提交、链接跳转等场景，语法为@事件名.prevent，可与.stop等修饰符链式组合。

在 Vue 模板中使用 .prevent 修饰符，核心就一条：加在事件指令后面，告诉 Vue “别让浏览器按它自己的规则走”。它等价于在原生事件处理函数里调用 event.preventDefault()，但写法更简洁、意图更明确。

什么时候必须用 .prevent

以下情况不加 .prevent，页面大概率会意外刷新或跳转：

• 表单提交（
  内点击 或回车）
• 链接点击（@#@#@#@#@#@#@#@#@#@0 —— 点击不跳转，只弹窗
• —— 回车触发搜索，不提交父表单

和 .stop 的关键区别别搞混

.prevent 管的是“浏览器自己要干的事”，比如跳转、刷新、弹菜单；.stop 管的是“事件往上传给父元素”的过程。两者解决的问题完全不在一个层面。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

典型误用场景：

• 只加 .stop 而不加 .prevent：表单点了还是刷新——因为冒泡被拦了，但默认提交没拦住
• 只加 .prevent 而不加 .stop：弹窗里的按钮点完，外层遮罩也响应了关闭——因为默认行为拦住了，但事件冒泡没拦，父级监听器照样执行

调试小技巧

如果加了 .prevent 还是刷新或跳转，先检查这几点：

• 是否写成了 @click.prevent.stop 却绑在了非原生可交互元素上（比如
  上用 @submit.prevent 是无效的）
• 是否事件名写错，比如把 @submit.prevent 误写成 @click.prevent 在 form 上
• 是否用了原生 submit 按钮但没设 type="button"，导致浏览器仍按 submit 类型触发默认行为