vue点击不同图片跳转同一个页面,新页面里面的内容不一样

Question

点击不同的图片跳转同一个页面

新页面里面的有一个img标签

里面的src根据点击的照片展示不同的照片

Answer 1

列表在tea后面加个id，如tea?id=0
在tea页面，用this.$route.query.id去获取id

Answer 2

很简单，你有两种做法
第一种，将img标签加到里面，href里面填写要跳转的连接
第二种，编写js点击事件，根据点击图片传过来的独一无二的参数，设置跳转地址

比如第一种吧，就是在所有的 img标签加上href，实现图片超链接

<a href="https://www.baidu.com"><img src="图片地址"/ alt=""></a>

就可以实现点击跳转了
第二种需要给每个img标签绑定点击事件，附带上独一无二的值，好在js里面识别进行跳转对应的页面

<img src="图片地址" alt="" onclick="tiaozhuan(独一无二的值)"/>
...................................................

下面js里的

methods:{
tiaozhuan(x):{
if(x==某个值){
this.$router.push("转路由地址")
}else if(x==xxxx).......
}

Answer 3

可以在第一个页面传参数呀，新的页面接收这个参数
比如：

//第一个页面
this.$router.push({
  name: 'tea',
  params: {
     //要传的内容
  }
})

//新的页面
this.$route.params 

就能拿到你要传的东西了

Answer 4

可以路由传参 看看 https://www.jianshu.com/p/d276dcde6656 。根据传过来得id遍历数据，找到id相同得渲染就行