m0_59080281
2021-07-21 12:53
采纳率: 81.8%
浏览 342
已采纳

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

img
点击不同的图片跳转同一个页面
img
新页面里面的有一个img标签

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

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 嘿嘿!请多指教 2021-07-21 13:44
    已采纳

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

    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • CSDN专家-微编程 2021-07-21 13:04

    很简单,你有两种做法
    第一种,将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).......
    }
    
    评论
    解决 1 无用
    打赏 举报
  • ^ZL 2021-07-21 13:34

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

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

    就能拿到你要传的东西了

    评论
    解决 1 无用
    打赏 举报
  • 崽崽的谷雨 2021-07-21 15:21

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

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题