vue-router:如何禁用 router-link 的 css 的大纲属性作为

Posted

技术标签:

【中文标题】vue-router:如何禁用 router-link 的 css 的大纲属性作为【英文标题】:vue-router: how to disable outline property of css of router-link as a 【发布时间】:2019-04-03 10:16:05 【问题描述】:

我想禁用链接元素中的 CSS 轮廓。我可以通过 css 类禁用大纲,但我不能禁用 <router-link> 的大纲。如何禁用大纲?

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus 
    outline: 0 none !important;
    border: 0;


<div>
    <!-- worked -->
    <a class="page-link">normal link</a>
</div>
<div>
    <!-- not worked -->
    <router-link to="" class="page-link">router-link</router-link>
</div>

浏览器:

Chrome

【问题讨论】:

路由器链接中添加了哪些其他类/样式? 仅限“页面链接”。 【参考方案1】:

试试这个:

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus 
  outline: 0 none !important;
  border: 0;


<div>
  <router-link to="">
    <a class="page-link">normal link</a>
  </router-link>
</div>

【讨论】:

【参考方案2】:

避免 !important amap

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus 

  outline: unset;
  border: unset;


<router-link to="" class="page-link">router-link</router-link>

【讨论】:

以上是关于vue-router:如何禁用 router-link 的 css 的大纲属性作为的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 vue-router 注册全局组件

如何在 html 中定义 vue-router 组件?

如何更新 vue-router

vue-router如何去中心化

简单了解如何使用vue-router和vue-resource

Vue.js路由组件vue-router如何使用?