歌曲列表数据获取

singer.js中封装函数

import { get } from './base'

export function getSingerList() {
    return get('/api/getSingerList')
}

export function getSingerDetail(singer) {
    return get('/api/getSingerDetail', {
        mid: singer.mid
    })
}

singer-detail.js发请求（异步）

	import { getSingerDetail } from '@/service/singer'

    export default {
      name: 'singer-detail',
      props: {
        singer: Object
      },
      async created() {
        const result = await getSingerDetail(this.singer)
      }
    }

index.js中挂载

{
    path: '/singer',
    component: Singer,
    children: [
      {
        path: 'id',
        component: SingerDetail
      }
    ]
  }

singer.vue加router-vie组件：渲染singer-detail
定义select在传递路由

name: 'singer',
    components: {
      IndexList
    },
    data() {
      return {
        singers: [],
        selectedSinger: null
      }
    },
    async created() {
      const result = await getSingerList()
      this.singers = result.singer
    },
    methods: {
      selectSinger(singer) {
        this.selectedSinger = singer
        this.$router.push({
          path: `/singer/${singer.mid}`
        })
      }
    }