Question

我在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标记内使用此变量？

Answer 1

您需要使用 v-bind:href或不久之后 :href绑定 href 值以进行 v-bind

因此，您可以简单地绑定任何具有指向href链接的变量，例如

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

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

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

2 个答案: