vue-cli 4.x 父子组件路由传参，并根据参数进行axios跨域取值

最新推荐文章于 2023-12-29 15:22:22 发布

原创最新推荐文章于 2023-12-29 15:22:22 发布 · 297 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #javascript

收录于

Vue-cli 专栏收录该内容

37 篇文章

订阅专栏

本文介绍在Vue.js中如何在子组件上添加点击事件，并通过路由使用query参数进行页面跳转和数据传递。具体展示了如何在子组件methods中定义点击事件处理函数，以及在父组件中通过mounted生命周期钩子获取传递的参数。

在子组件元素上添加点击事件

<img-card
        v-for="(item, index) in imgCardData"
        :key="index"
        :card-url="item.picUrl"
        :card-play-count="item.playCount"
        @click.native="goListDetial(item.id)"
 >

在子组件methods中定义方法

这里利用query进行传值，跳转后会显示？id+传递的参数，如

http://localhost:8080/#/songListDetail?id=4973000699


```javascript

```javascript
goListDetial(id) {
	this.$router.push({
        name: "songListDetail",
        query: {
        	id: id
        }
    });
},

在父组件中获取值并跨域取值

data() {
    return {
      songListDetail: []
    };
  },
  mounted(){
    this.getListDetail();
  },
  methods: {
    getListId() {
      this.listId = this.$route.query.id;
    },
    async getListDetail() {
      let res = await axios.get(
        "http://localhost:3000/playlist/detail?id=" + this.$route.query.id
      );
      if (res.status == 200 && res) {
        this.songListDetail = res.data.playlist;
      }
    }
  },