8.get传值—页面跳转

使用query获取get传递的值

项目结构

mv/index.vue

<template>
  <div class="container">
      <mv-index :data="item"
      v-for="item of data" :key="item.id"></mv-index>
  </div>
</template>
<script>
import MvIndex from '../Mv/components/MvIndex'
export default {
  name:"Mv",
  data(){
    return{
      data:[],
    }
  },
  components:{
   MvIndex
  },
  mounted(){
    this.axios.get("mv/first?limit=12").then(res=>{
      this.data=res.data.data;
    })
  }
}
</script>

2-1在列表页传值this.$router.push()

mv/components/MvIndex.vue
要通过点击对应的item将id传过去，使用组件之后，item在子组件中，所以通过子组件传

//1.在子组件中定义一个事件，传id
<template>
  <div @click="handleClick(data.id)">
    <img :src="data.coverImgUrl" />
    <p>{{data.name | format()}}</p>
  </div>
</template>
//2.在methods方法中触发
methods:{
    handleClick(id){
        console.log(id)
        this.$router.push(`/detail?id=${id}`)
    }
}

2-2在详情页接收这个值—computed

MvDetail/index.vue

export default {
        name:"Detail",
        computed:{
            id(){
                return this.$route.query.id
            }
        },
     //发送请求
       mounted(){
                var id=this.id;     //获取id
                this.axios.get(`/top/playlist/detail?id=${id}`).then(res=>{    
                    console.log(res)
                })
            }
    }

2-3在详情页跳转回列表页

this.$router.back()
//定义一个事件
<template>
    <div>
       <p>detail页面</p>
       <button @click="toggle">跳转回列表页面</button>
    </div>
</template>
//methods中触发
 export default {
        name:"Detail",
        ...
        methods:{
            toggle(){
                this.$router.back()
            }
        }
    }

2-4如果要传多个值，传的方式和id一样

//首页data.name
<template>
    <div class="list" @click="handleClick(data.id,data.name)">
      <img :src="data.cover" alt="" class="bg">
      <p>{{data.name |format()}}</p>
    </div>
</template>
methods:{
  handleClick(id,name){
    this.$router.push(`/mvplay?id=${id}&name=${name}`)
  }
}
//详情页接收
<template>
 <p>{{name}}</p>   //直接使用
  </template>
  computed:{
    id(){
      return this.$route.query.id
    },
      name(){
        return this.$route.query.name
      }
  },
    methods:{
      toggle(){
        this.$router.back()
      }
    }

课件地址https://gitee.com/wangsiman/work/tree/master/vue/wangyi-music