vuejs路由器链接和eslint规则答案

【问题标题】：vuejs router link and eslint rulesvuejs路由器链接和eslint规则
【发布时间】：2020-08-30 07:16:09
【问题描述】：

如果您安装了 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 配置的某些内容？

这是一个示例的链接：

【问题讨论】：

【解决方案1】：

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

a {
  display: inline-block;
}

【讨论】：