html - Vue.js 路由器链接 css 道具

Question

我一直在努力更改路由器链接标签中写入的文本的默认 css 道具。默认为带下划线的紫色，我想更改字体、大小和颜色，但无法更改。我应该关注我的 CSS 中的哪个位置？我已经在我的 .sidebar-buttons 按钮 css 元素中尝试了“文本装饰：无”。

这是我现在想要改变的设计。

.sidebar {
  grid-area: 2 / 1 / 6 / 2;
  background-color: grey;
}
.sidebar-buttons button {
  background-color: white;
  border-radius: 12px;
  width: 40%;
  height: 7vh;
}
.sidebar-buttons button:hover {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="sidebar">
  <div class="sidebar-buttons">
  <hr />
  <button>
    <router-link to="/">Home</router-link>
  </button>
  <br />
  <button>
    <router-link to="/clothes">Clothes</router-link>
  </button>
  <br />
  <button>
    <router-link to="/skate">Skate</router-link>
  </button>
  <br />
  <hr />
  </div>
</div>

标签： htmlcssvue.js

Answer 1

叮叮叮！终于让它工作了。我必须将写在 router-link 标签中的文本放在 a-tag 中，然后 css 支持 a-tag。希望这对将来的人有所帮助！

.sidebar {
  grid-area: 2 / 1 / 6 / 2;
  background-color: grey;
}
.sidebar-buttons button {
  background-color: white;
  border-radius: 12px;
  width: 40%;
  height: 7vh;
}
.sidebar-buttons button:hover {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.sidebar-buttons button a{
  color: black;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
}

<div class="sidebar">
  <div class="sidebar-buttons">
  <hr />
  <button>
    <router-link to="/"><a>Home</a></router-link>
  </button>
  <br />
  <button>
    <router-link to="/clothes"><a>Clothes</a></router-link>
  </button>
  <br />
  <button>
    <router-link to="/skate"><a>Skate</a></router-link>
  </button>
  <br />
  <hr />
  </div>
</div>