vue列表跳转详情页面上一条下一条的实现

原创

于 2019-03-27 14:06:30 发布 · 5.4k 阅读

13 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue应用中，从列表页面跳转到详情页面，并实现上一条和下一条记录的切换功能。关键在于通过传递参数，利用filter方法在详情页面找到相邻的记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在点击跳转的地方传值

 on: {
                      click: () => {
                        this.$router.push({path:`./detail`,query:{detailId: params.row.detailId,
                            phone:this.checkData.phone,name:this.checkData.name}})
                      }
                    }

在详情内调用外面列表的接口，将传过来的值赋给接口利用filter来获取id,（表达太麻烦了，代码奉上）

 methods:{
      initData(){
        ApiClient.get('/backend/customerDetail/list.do',{page:1,size:9999999,state:'处理中',phone:this.$route.query.phone,name:this.$route.query.name}).then(data => {
          const self = this;
          this.dataGroup = data.items;
          const filterData = data.items.filter(function(v,i){
            if(v.detailId == self.$route.query.detailId){
              self.index = i;
              return v
            }
          });
          this.data = filterData[0]
        })
      },
      previous(){
        if(this.index>0){
          this