vue 点击图片列表将图片ID通过URL传到另外一个页面

最新推荐文章于 2024-07-11 15:03:42 发布

w_gold_qin

最新推荐文章于 2024-07-11 15:03:42 发布

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/w_gold_qin/article/details/105436484

这是一个关于Vue应用的教程，讲解如何从一个图片列表页面（a页面）通过URL参数将图片ID传递到另一个详情页面（detailrequire页面）。首先在a页面设置路由跳转，携带图片ID。接着在router/index.vue配置相应的路由。最后在detailrequire页面，介绍两种不同的方法来接收并解析URL中的图片ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是图片列表页面 a页面在这里插入图片描述
1、在a页面，写上跳转路由（to（跳转）到detailrequire页面，附带上图片的id）

2、跳转需要写跳转路由，在router/index.vue中写路由

3、在detailrequire页面接收该id

接收id有两种方法，区别见
两者区别

1、this.$route.query.id
2、this.$route.params.id

或者

{
  path: '/myShow',
  name: 'MyShow',
  component: () =>
    import(/* webpackChunkName: 'Login' */ 'Src/views/MyShow.vue'),
  meta: {
    title: 'TA的主页',
  },
},

@click="jump(contentData.createBy.userId)"

jump(userId) {
      this.$router.push({ path: '/myShow/', query: { userId: userId }})
    },

页面用this.$route.query.userId获取