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

Question

问题

出于某种原因，当我将 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>

Answer 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>