vue 怎么给遍历的li分别添加加路由跳转

Question

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<ul class="home_tab">

  <li v-for="item in tabs">
    **<router-link :to="item.ur">**
      <div><img :src="item.icon" alt=""/></div>
      <span>{{item.name}}</span>
    **</router-link>**
  </li>
</ul>

这是报错信息，不知道怎么解决 next is undefined？

Answer 1

:to需要一个路由，可以是串或者对象，item.ur值不正确吧？（recommend，和hi，是我定义好了的路由）

<template>
  <div id="app">
   
    <ul class="home_tab">
      <li v-for="(item,index) in tabs" :key=index>
        <router-link :to="item.ur">
          <div><img :src="item.icon" alt=""/></div>
          <span>{{item.name}}</span>
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
 
  data () {
    return {
      tabs: [{
        ur: 'recommend',
        name: 'recommend'
      }, {
        ur: 'hi',
        name: 'hi'
      }
      ]
    }
  }
}

//路由部分
export default new Router({
  routes: [{
    path: '/',
    redirect: '/recommend'
  }, {
    path: '/recommend',
    component: Recommend
  }, {
    path: '/hi',
    component: hi
  }]
})

Answer 2

它提示你的item.ur不是字符串或者对象,拿到的是undefined的，你定义的是不是item.url而不是item.ur呢？然后你页面写错字段名了？