Font Awesome 不能在 Router Link Vue.js 中工作（可能的 Vue-Router 错误）

Posted 2023-02-22

【中文标题】Font Awesome 不能在 Router Link Vue.js 中工作（可能的 Vue-Router 错误）

【英文标题】：Font Awesome not working within Router Link Vue.js (Possible Vue-Router Bug)

【发布时间】：2018-07-16 22:55:49

【问题描述】：

问题

出于某种原因，当我将 Font Awesome 图标作为 router-link 的第一个子元素时，Vue 决定忽略该图标之后的任何内容（图标本身有效）。

请参阅以下内容：

<router-link to="/"><font-awesome-icon icon="book" />Documentation</router-link>

这个输出：

// Actual: 
<a...><svg>...<svg></a>

// Expected:
<a...><svg>...<svg>Documentation</a>

有其他人经历过吗？我做错了吗？

我尝试过的

我尝试将图标和文本包装在 span 标记中，如下所示：

<router-link to="/"><span><font-awesome-icon icon="book" />Documentation</span></router-link>

这会产生与上面相同的结果（加上 span 标签）...

我还尝试将图标放在另一侧（仅用于测试），这很有效！

<router-link to="/">Documentation<font-awesome-icon icon="book" /></router-link>

上述测试有效，但是，这显然不是我想要的，我并不太热衷于使用 CSS 重新定位图标（非常肮脏的修复）

我的假设

我相信这实际上可能是渲染空元素时 vue-router 的一个错误，但我不能确定。我想我可以用<br /> 标签进行测试，看看会发生什么……我会回来的！

更新：我可以确认空元素确实有效！我刚刚尝试了以下方法，效果很好：

<router-link to="/"><br />Documentation</router-link>

【问题讨论】：

您找到解决方案了吗？

我在 25 分钟前才问过... :-) - 不，还没有

找到一个，正在输入

@Mohd_PH 你有同样的问题吗？我只是在玩 Vue，所以我不介意，但我想我会问这个问题，以防其他人遇到它......

@Mohd_PH 我希望有人告诉我我做错了，或者这是一个错误。我实际上对找到解决方法并不感兴趣，因为我可能很容易做到这一点......更多的是关于这是否是正确的方法:-)

【参考方案1】：

当我导入图标然后绑定它 :icon 时，它对我有用，你可以看到示例 Here 或下面：

<template>
 <div class="hello">
    <router-link to="/"><font-awesome-icon :icon="icon" />Documentation</router-link>
 </div>
</template>

<script>
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 import faBook from '@fortawesome/fontawesome-free-solid/faBook'
 export default 
  name: 'hello',
  components:
    'font-awesome-icon' : FontAwesomeIcon 
  ,
  computed:
    icon()
        return faBook;
    
  


</script>

【讨论】：

Hmmmm...如果你和我一样，它会起作用吗？即你能复制我的问题吗？假设我在任何给定页面上都会有许多图标，那么必须计算每个图标是非常糟糕的代码......更不用说，这只需要在图标位于 router-link 内时完成，从而导致代码不一致设计。本质上它只是一种解决方法......

这证实了我的怀疑，这是一个错误:-)

不，它没有用，和你一样。即使在router-link 之外。 here is an example 在文档中

您需要将特定图标导入模板，然后它才能按照我的方式工作，如文档中所示。 compute 方法不是要求，因此当图标不是第一个孩子时它可以工作。我会为你的努力和时间投赞成票，因为非常感谢，但我不会接受这个作为答案，因为它只是实现我需要的一种解决方法。我希望你没问题 - 我只是想向其他人开放，因为他们可能会发现我编写的代码有问题，或者确认这是一个错误

干杯伙伴，有一个伟大的：-D