Vue中的v-for循环列表下，实现点击跳转不同页面

当用v-for进行列表循环的时候，需要实现在点击的时候能够跳转不同的页面。

<!-- 快捷图标列表 -->
          <el-row>
            <el-col class="iconList" v-for="item in systemList" :key="item.title" :span="6" >
              <div class="hoverChange" @click="gotoPage(item)">
                <img class="imgCircle" :src="item.url" >
                <li>{{ item.title }}</li>
              </div>
            </el-col>
          </el-row>插入代码片

item.name是循环列表中 标明的router下的name且唯一，
这里进行传参跳转 然后进入相应界面。
methods: {
    gotoPage(item) {
      this.$router.push({name: item.name})
    }
  }

这是自定义的config文件夹下，v-for循环的是这个列表，
里面包含name(tips:这个name是在router里面定义好的）

export const systemList = [
  { title: '物料条码', url:require("@/icons/png/allocation.png"), name: 'MaterialsBarcode' },
  { title: '货架管理', url:require("@/icons/png/carrier.png"), name: 'Shelf' }
]

这里是router文件下的index.js,name是唯一的值
{
   path: 'materialsBarcode',
   name: 'MaterialsBarcode',
   component: () => import('@/baseInfo/index'),
  },

通过以上步骤，最终可以完成相应跳转。