为什么 Vue 的 <router-link> 会干扰我的 HTML？

Question

因此，在编写 CSS 时，我创建了一个模式，当单击一个不可见的复选框时该模式会打开。自然地，我使用了 <label for = ""> hack 来解决这个问题；单击标签会激活复选框并打开 div。当我使用以下 html 时，该系统按预期工作：

<label class = "btn" for = "modal-1">+</label>

但是，当我尝试引入 vue-router 链接以将内容加载到模态时，事情停止了：

<router-link to = "/classComp/create">
   <label class = "btn" for = "modal-1">+</label>
</router-link>

上面的 HTML 成功将代码加载到模态中，但模态仍然不可见。出于某种原因，路由器链接被激活，但标签类别没有。 <router-view> 元素在我的页面上呈现如下：

<a href="/classComp/create" class=""><div class="addSidebar"><label for="modal-1" class="btn">+
            </label></div></a>

有人知道这个错误的原因或解决方法吗？谢谢。