Vue.js router-link文本存在尾随空白致无法居中，如何去除？

嘿，这个问题我之前也碰到过！其实根源出在Vue模板的空白字符处理上——你看你代码里{{ view.text }}前后的换行和空格，Vue会把这些空白原封不动地渲染到页面里，就导致文本后面多了尾随空白，自然没法完美居中啦。下面给你几个实用的解决办法：

方法1：去掉插值前后的空白（最直接） #

把{{ view.text }}和<router-link>标签写在同一行，直接消除模板里的多余空白：

<div class="DesktopHeaderView">
  <router-link 
    class="DesktopHeaderView__link" 
    active-class="active" 
    exact 
    v-for="(view, index) in views" 
    :key="index" 
    :to="view.to"
  >{{ view.text }}</router-link>
</div>

这样渲染出来的文本就不会带任何尾随空白了，完美解决对齐问题。

方法2：用v-text指令替代插值 #

如果你不想调整代码的换行格式，也可以用Vue的v-text指令，它会直接把数据内容渲染到元素中，不会引入模板里的空白字符：

<div class="DesktopHeaderView">
  <router-link 
    class="DesktopHeaderView__link" 
    active-class="active" 
    exact 
    v-for="(view, index) in views" 
    :key="index" 
    :to="view.to"
    v-text="view.text"
  ></router-link>
</div>

这个方法的好处是能保留你原来的代码排版，同时彻底避免空白问题。

方法3：CSS辅助（应急方案） #

如果以上两种方法都不想用，还可以通过CSS强制消除空白影响，给router-link添加样式：

.DesktopHeaderView__link {
  white-space: nowrap;
  /* 若是内联元素，可搭配以下样式强化居中效果 */
  display: block;
  text-align: center;
}

不过这个方法只是“治标”，更推荐前面两种从根源解决的方案。

内容的提问来源于stack exchange，提问作者Fei Whang