如何将变量传递给vue-router v-link

Question

我有一个vue组件来渲染导航列表,并传递导航列表,每个项目包括标题和链接:

<template>
  <ul>
    <li v-for="item in list"><a v-link="{{ path: item.link }}"></a></li>
  </ul>
</template>

<script>
  export default {
    props: ['list']
  }
</script>

我尝试将变量传递item.link给v-link路径,但失败了.

得到这个警告:

[Vue warn]: v-link="{{ path: item.link }}": attribute interpolation is not allowed in Vue.js directives and special attributes.

如果将变量传递给v-link路径,该怎么办？

谢谢阅读 :)

Answer 1

更短的方法是：

<router-link
    :to="`/applications/${currentApplicationId}`"
>Overview</router-link>

Answer 2

我在vue-router 2.x中使用了以下内容:

<router-link :to="{path: '/applications/' + currentApplicationId}" class="nav-link">Overview</router-link>

可在此处找到更多文档.

Answer 3

v-link中的语句不需要"Mustache"语法.

<li v-for="item in list"><a v-link="{ path: item.link }"></a></li>

你可以看到http://router.vuejs.org/en/index.html