点不同图片跳转不同页面

朋友们，点史杰进入史杰的详情页，点周方进入周方的详情页，怎么去写呀

这个 就是 类似商品详情页 。 路由传参 。 在 router 里配置 path:"detail/:id" 然后 点击跳转的时候 router.push({path:/detail/${id}})

https://www.jianshu.com/p/b7e1303f2750

可以写一个点击事件, 写一个函数,点击之后跳转详情窗口

点击时可以拿到每个item,路由跳转到详情页传需要的参数就可以了
点击事件:@click='detail(item)'
在method中定义方法:
detail(item){
this.$router.push({name: '详情页路由', params: { id: item.id},})
}

数据里面将每条数据写上id，然后点击时候判断id

类似这样，用 query 参数（?id=xxx）的形式区分。

<ul>
  <li>
    <a href="/detail?id=01" target="_blank">
      <img src="./01.png" alt="">
    </a>
  </li>
  <li>
    <a href="/detail?id=02" target="_blank">
      <img src="./02.png" alt="">
    </a>
  </li>
</ul>

在 Vue 中类似这样 ：

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      <a href="javascript:" @click="linkTo(item.id)">
        <img :src="item.img" >
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: '01',
          img: require('./img/01.jpg'),
          name: '史杰',
          desc: '首都医药大学',
        },
        {
          id: '02',
          img: require('./img/02.jpg'),
          name: '周方',
          desc: '301',
        },
      ]
    };
  },
  methods: {
    linkTo(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id,
        }
      })
    }
  },
};
</script>

传不同的id