我使用v-作为路由器链接，但它不起作用答案

【问题标题】：I used v-for the router-link but it‘s not worked我使用v-作为路由器链接，但它不起作用
【发布时间】：2017-03-02 03:17:38
【问题描述】：

<li v-for="item in navbars">
    <router-link to="{path:item.router}">{{item.names}}</router-link>
</li>

但是不行，控制台是

vue-router.esm.js?f926:16 [vue-router] 重复命名路由定义：{ name: "auto", path: "/auto" }

export default {
  data () {
    return {
      isShow: false,
      navbars: [
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'}
      ]
    }
  }
}

【问题讨论】：

你的路由定义对象是什么样子的？
我编辑这个问题

标签： vuejs2 vue-router

【解决方案1】：

而不是将to 更改为:to。由于性能原因，一个好的做法是使用:key="i"，包括v-for="(item, i) in navbars"。

其他人访问此问题并在其代码中包含 :href 的注释 - 您需要将 :href 更改为 :to。

【讨论】：

【解决方案2】：

在使用 javascript 表达式时应该使用 v-bind：

 <router-link :to="{path:item.router}">{{item.names}}</router-link>

vue router-link

【讨论】：

【解决方案3】：

如果您使用 router-link：

<li v-for="item in navbars" v-bind:key="item.id">
        <router-link :to="{path:item.router}">{{item.names}}</router-link>
</li>

或者如果您使用 href：

  <li v-for="item in navbars" v-bind:key="item.id">                    
      <a :href="item.router">{{ item.title }}</a>
    </li>

您可以将id添加到navbars

 export default {
      data () {
        return {
          isShow: false,
          navbars: [
            {names: 'xx', router: '/xx', id: 1},
            {names: 'xx', router: '/xx', id: 2},
            {names: 'xx', router: '/xx', id: 3},
            {names: 'xx', router: '/xx', id: 4},
            {names: 'xx', router: '/xx', id: 5}
          ]
        }
      }
    }

【讨论】：