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

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

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

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

  • 写回答

4条回答 默认 最新

  • 你好!机器人 2021-07-21 13:44
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 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).......
    }
    
    评论
  • ^ZL 2021-07-21 13:34
    关注

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

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

    就能拿到你要传的东西了

    评论
  • 崽崽的谷雨 2021-07-21 15:21
    关注

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

    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 已采纳回答 7月21日
  • 创建了问题 7月21日

悬赏问题

  • ¥15 求制作一个个人网页,
  • ¥15 寻涂色内存脚本作者有项目有市场有资源.却技术
  • ¥15 蓝桥杯c51单片机问题
  • ¥15 ajax跨域问题请求修改代码
  • ¥15 python matplotlib
  • ¥15 短信测压+语音,有偿,必须用Python
  • ¥20 COCOS2DX的protobuf协议注册函数问题
  • ¥15 (标签-Pytorch|关键词-Stream)
  • ¥15 求深圳2019年开放数据应用创新大赛的营运车辆数据!
  • ¥15 软件UI界面绘制折线图