为什么<nuxt-link>在Nuxt.js中覆盖我的css？

Question

我得到了Nuxt的这个问题。

每当我使用时，它会自动重写我的CSS设计，并以不同的方式显示它。你可以在下面的视频中看到确切的问题。

Video of the issue

如果我用<a>替换<nuxt-link>，一切都会开始正常工作。

导航条代码示例：

  <nav class="navbar navbar-expand-lg navbar-dark mb-5 text-white" style="z-index: 10; background-color: rgba(0,0,0,0.3)">

<nuxt-link to="/" class="navbar-brand" active-class="active">
  Frontend
</nuxt-link>
<button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarNav"
  aria-controls="navbarNav"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span class="navbar-toggler-icon" />
</button>
<div id="navbarNav" class="collapse navbar-collapse">

  <ul class="navbar-nav">
    <li class="nav-item active">
      <nuxt-link to="/" class="nav-link" active-class="active">
        Home
      </nuxt-link>
    </li>
    <li class="nav-item">
      <nuxt-link to="/games" class="nav-link" active-class="active">
        Games
      </nuxt-link>
    </li>
  </ul>

正确的css (在页面加载开始时)

​

错误的css (几秒钟后)

​

Answer 1

问题出在index.vue (主页)中的<style>。

已将其更改为<style scoped>，此问题已修复。