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:[ ..... ]
})