Question

如果您安装了vuejs eslint插件并将其配置为使用“强烈推荐”规则集，则linter会告诉您更改以下代码：

<router-link class="my-link" :to="{ name: 'index' }">Home</router-link>

进入

<router-link
  class="my-link"
  :to="{ name: 'index' }"
>
  Home
</router-link>

问题是，当您执行此操作时，<a>标签会在文本内显示换行符，从而导致样式看起来很奇怪，并且在没有任何内容的情况下带有下划线。

This is the rule会导致问题，您绝对可以通过使用配置选项并告诉规则忽略<router-link>元素来解决此问题，但是由于其他规则要求，您最终会得到样式奇怪的代码属性在换行符上：

<router-link
  class="my-link"
  :to="{ name: 'index' }"
>Home</router-link>

以前有人遇到过吗？有没有一种方法可以只修剪锚标记内的文本？我在Vue路由器配置或ESLint配置中缺少什么吗？

以下是示例的链接：

Answer 1

如果您愿意在此处使用css并将链接设置为内联块元素而不是默认内联，则空白将消失。

a {
  display: inline-block;
}