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

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

<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;
      }
    }
  },