Question

<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：＆＃34; auto＆＃34;，path：＆＃34; / auto＆＃34; }

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

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

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

vue router-link

Answer 2

不是将to更改为:to。出于性能原因，最好使用:key="i"和v-for="(item, i) in navbars"。

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

Answer 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}
          ]
        }
      }
    }

我使用v-for router-link但它没有用

3 个答案: