vue点击按钮跳转到详情页

最新推荐文章于 2024-05-23 15:14:10 发布

原创最新推荐文章于 2024-05-23 15:14:10 发布 · 7.4k 阅读

21 ·

CC 4.0 BY-SA版权

在Vue应用中，通常使用`router-link`组件进行页面间的跳转。本文以乐队与音乐家为例，说明如何在点击按钮时跳转到详情页面。详细步骤包括在旧页面设置`router-link`，然后在新页面接收并处理数据。

还是以乐队与音乐家为例，我们熟知当我们想要点击跳转时，有时候自然地想到了a标签，但是在vue中貌似不适用
在这里插入图片描述
旧页面中则只有这一步操作router-link就是点击跳转，接下来就来到了新页面

<template>
  <div id="app1">
    <table border="1">
      <tr>
        <td>音乐家</td>
      </tr>
      <tr v-for="item in items">
        <td>{{item.name}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  import axios from 'axios'

export default {
  name: 'zhanshiyinyuejia',
  data () {
    return {
      items: [],
      id:this.$route.params.id,
      // 这里的id就是接收旧页面传递过来的id，方法就是这么接收的this.$route.params.id,
      // 白色的id就是对应的前面旧页面的params:{id(这个id):item.id【这里就是接收后台查询传递的id赋值给了前面】}}
      // 到这vue界面的跳转完成了，接下来就可以执行下面axios像后端发送数据的操作了，因为这里的逻辑是点击乐队查看乐队下的
    // 音乐家，在执行点击时就携带了乐队id传到了新页面，（）然后根据id值去查这个id下的所有人，那么就需要axios以POST方式将id
    // 传到后台，，，传送id的方式就是axios里的data里的this.id也就是“id:this.$route.params.id,”这句话赋值的id

      // 而axios里的data里的this.id 赋值的id就是往后台发送的id，需要django用request.data['id'],这时就直接来到了django了
    }
  },
  mounted () {
    axios({
      url: '/api/zhanshiyinyuejia/',
      method: 'post',
      data:{
        id:this.id
      }

    }).then(res=>{
      this.items = res.data.data
    })
  }
}
</script>

<style scoped>

</style>

要跳转的新页面的操作
在这里插入图片描述
关系对应图

已经发送了后端，接下来就是来到了后端

class zhanshiyinyuejiaView(APIView):
    def post(self,request):
        data=request.data['id']
        # 这是获取前面axios里data里this.id赋给变量名id的值
        yuedui = Yuedui.objects.filter(id= data).first()
        # 虽然已经获取到了id那么还得需要查询一下数据库里是不是有这条id，查询完后赋值给变量名’yuedui‘
        yinyuejia = yuedui.yinyuejia_set.all()
        # yinyuejia = yuedui.xxx.all()
        # 然后变量名点上你要查询展示的这个乐队名下的音乐家的数据库表名小写加下划线set，通过乐队反向查询乐队下的所有音乐家，这里是多对多
        yinyueobj = zhanshiyinyuejiaSerializer(instance=yinyuejia,many=True)
        return Response({
            'status':1000,
            'msg':'ok',
            'data':yinyueobj.data
        })

这是序列化的

class zhanshiyinyuejiaSerializer(serializers.Serializer):
    id = serializers.IntegerField(read_only=True)
    name = serializers.CharField()