当用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'),
},
通过以上步骤,最终可以完成相应跳转。