vue中v-for循环出来的元素click事件跳转到不同的页面

参考vue官网编程式导航的

router.push({ path: /user/${userId} }) // -> /user/123

1.在home.vue文件里，html部分：

//template <div v-for="(items,indexs) in totalArr" :key="indexs"> <img :src="items.imgUrl" @click="jump('',`${items.type}`)"/> </div>

2.script里数据部分，通过type判断每个图片要跳转的路由，根据实际情况调整：

<script> export default { data() { return { totalArr: [{ imgUrl: require('@/assets/img1.png'), type:'asset', }, { imgUrl: require('@/assets/img2.png'), type:'preAlarm', }, { imgUrl: require('@/assets/img3.png'), type:'factory', }, { imgUrl: require('@/assets/img4.png'), type:'monitor', }, { imgUrl: require('@/assets/img5.png'), type:'target', }, ], }; }, </script>

3.methods里调用方法：

methods: { jump(index,type){ if(type=='preAlarm'){ //该路由在router---index.js里已配置 this.$router.push('/catalog'); }else if(type=='factory'){ this.$router.push('/instance'); } } },

4.router->index.js里正常写

import home from '@/components/homePage/index.vue' ........ export default new Router({ routes:[ ..... ] })