如何在href标签中传递变量？答案

【问题标题】：How to pass a variable in a href tag?如何在href标签中传递变量？
【发布时间】：2020-12-28 19:28:55
【问题描述】：

我在 vue 中有一个应用程序，其中我在标题中显示不同的链接。根据环境，链接的根会有所不同，因此我保存了一个环境变量，其中包含链接的根的值。我将它导入到组件中以使用对这个变量的引用，但我找不到将它包含在 href 标记中的方法。在我的组件脚本中，我导入声明变量的配置文件并返回

<script>
import Config from './../../config.js';

export default {
  data: function () {
    return {      
      hoverHome: false,
      testUrl: Config.TEST_URL
    }
  },

此时环境变量带来的值是https://www.test.sp，在我的模板中我尝试使用它，但我不知道怎么做，既不是唯一的值，也不是将它与网址终止

  <li class="nav-item">
      <a class="nav-link head" href=testUrl>Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" href=testUrl/shops>Shops</a>
  </li>

如何在 href 标签中使用这个变量？

【问题讨论】：

标签： html vue.js environment-variables href

【解决方案1】：

您需要使用 v-bind:href 绑定href 值，或者使用 :href 绑定v-bind

所以你可以简单地绑定任何有链接到你的href的变量，比如

<a v-bind:href="'/anylink/' + testUrl">

【讨论】：

【解决方案2】：

您需要使用 v-bind: 或其别名 :。例如，

<li class="nav-item">
      <a class="nav-link head" v-bind:href="testUrl">Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" v-bind:href="testUrl + '/shops'">Shops</a>
  </li>

或

<li class="nav-item">
      <a class="nav-link head" :href="testUrl">Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" :href="testUrl + '/shops'">Shops</a>
  </li>

见How to pass a value from Vue data to href?

【讨论】：