I used v-for the router-link but it‘s not worked

Question

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

but it does not work, the console is

vue-router.esm.js?f926:16 [vue-router] Duplicate named routes definition: { 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'}
      ]
    }
  }
}

Answer 1

Instead of having to change into :to. A good practice would be to use :key="i" including v-for="(item, i) in navbars" due to performance reasons.

A note from someone else visiting this question and having :href in its code - you need to change :href into :to.

Answer 2

If you use router-link:

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

or if you use href:

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

You can add id to 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}
          ]
        }
      }
    }