Vue点击循环内某一项跳转

循环体为：

<div class="cards" v-for="item in card" @click="details(item.name)">
       <el-card class="trends" >
         <div class="out">
         <div class="name">{{item.name }}</div>
         <el-badge is-dot class="item">
           <div class="count">{{item.count}}</div>
         </el-badge>
         </div>
       </el-card>
     </div>

js里给定循环参数

data() {
    return {
      card:[
        {name: '分类1',count:'5个'},
        {name: '分类2',count:'5个'},
      ]
    }
  },

循环效果图

思路：

我们想设置的是只点参数点击跳转，所以需要指定不相同的数据参数，选用name作为指定的参数，当name值为分类1的时候跳转到下一个页面

解决
设置点击事件@click="details(item.name)"参数为name，令name值为分类1时跳转

details(name) {
      const that = this;
      if(name ==='分类1'){
        that.$router.push('/classify')
      }
    }

到此跳转就完成啦