Vue.js中Router Link内Font Awesome图标异常（疑似Vue-Router Bug）

我之前也碰到过完全一样的问题！这不是你的操作失误，不少Vue开发者都踩过这个坑。

问题原因 #

这个现象主要和Vue对router-link的子元素解析机制有关：当router-link的第一个直接子元素是Font Awesome这类inline图标元素时，Vue的事件委托和内容渲染逻辑会出现异常，导致后续的文本或元素被意外忽略。

可行的解决方案 #

除了你发现的把图标放到内容另一侧的方法，还有几种更通用的解决思路：

• 给router-link指定块级渲染标签
  使用tag属性将router-link渲染为块级元素（比如div），这样它的子元素解析会更稳定：

  <router-link to="/your-path" tag="div">
    <i class="fa fa-icon"></i> 你的文本内容
  </router-link>
  

• 用块级容器包裹所有子元素
  如果不想改变router-link的默认标签，可以在内部加一个块级容器（比如div，或者设置display: block的span），把图标和文本都放在这个容器里：

  <router-link to="/your-path">
    <div style="display: inline-block;">
      <i class="fa fa-icon"></i> 你的文本内容
    </div>
  </router-link>
  

  你之前尝试的普通span可能因为是inline元素，没触发Vue解析逻辑的调整，换成块级容器就能解决问题。

• 检查Vue版本
  这个问题在Vue 2的部分旧版本中比较突出，如果你还在使用Vue 2，尝试升级到较新的小版本（比如2.6.x系列），可能会修复这个解析bug；Vue 3中这个问题已经被大幅优化，出现概率很低。

内容的提问来源于stack exchange，提问作者Ben Carey