如何在 Nuxt 中避免嵌套链接导致的路由跳转干扰
在 Nuxt 应用中，本质是语义化 标签，因此禁止在其内部嵌套其他可点击链接（如 ）；否则会触发默认跳转行为，干扰模态框等局部交互。正确做法是用
许多开发者在 Nuxt 项目中都踩过这个坑：在一个 `
问题的根源在于 HTML 规范本身。根据 W3C 标准，`` 元素内部禁止嵌套另一个可交互的 ``。而 `
具体来说，点击“Open Modal”按钮会同时触发两件事：第一，你的 `openModal()` 方法确实执行了，模态框会打开；但第二，外层的 `
✅ 正确实现方式
解决办法其实很直接：把内层那个惹事的 `` 标签，换成一个语义中立的 ` `，同时请上 Vue 的好帮手—— `.prevent` 事件修饰符。
class="modal-link"
>
Open Modal
这里简单解释一下：`.prevent` 修饰符会自动调用 `event.preventDefault()`，这就从根本上消除了外层 ` ` 本身没有链接的语义，所以不会引发任何意外的 URL 跳转。 掌握了基本方法，再来看看几个需要特别注意的地方和更优的实践方案：
总而言之，解决这类问题的核心，就是遵循语义化的 DOM 结构，并施加精准的事件控制。只要做到这两点，就能完美解耦全局页面导航与局部交互逻辑。如此一来，模态框可以随心所欲地开合，页面的可访问性和代码的可维护性也得到了充分的保障。
⚠️ 注意事项与最佳实践
methods: {
na vigateToPage() {
this.$router.push('/new-page/')
}
}
