vue里面如何让v-for循环出来的列表里面的列表click事件跳转到不同的页面

Question

  <ul>
    <li v-for="(item,key) in list" :key="key">
      <span @click="$router.push()">{{item.name}}</span>
    </li>
  </ul>
  
  list: [{
    name: '充值记录'
  }, {
    name: '个人信息'
  }, {
    name: '修改密码'
  }, {
    name: '安全退出'
  }]
  
  点个人信息的时候跳到个人信息页面
  点修改密码的时候跳到修改密码
  如何实现？

Answer 1

可以在你的list数组中加上路由字段，点击的时候动态的获取各自的跳转路由

Answer 2

给你个官方文档链接：https://router.vuejs.org/zh-c...

Answer 3

<ul>
    <li v-for="(item,key) in list" :key="key">
      <router-link :to="路由"></router-link>
    </li>
  </ul>

把对应的路由遍历到router-link 的:to内里就可以。