在有些时候,我们需要跳转到其他页面,但是没有接口将相应的数据传过去,需要前端自己将数据传到另一个页面,那这样的情况怎么做呢?

要进行传递参数的页面

首先,在相应的button按钮上,将点击事件附上

<template slot-scope="{ row }">
              <el-button @click="goChange(row)">点击传参</el-button>
</template>

然后在 methods 下将点击事件添加

 methods: {
    // 跳转到传递参数页
    goChange(row) {
      this.$router.push({
        path: '要跳转的页面地址',
        query: {
          cardNoFirst: row.cardNoFirst,
          cardNoEnd: row.cardNoEnd
        }// 要传递的参数
      })
    }
  }

要接受参数的页面

data() {
    return { 
      cardNoFirst: '',
      cardNoEnd: ''
    }
  }, 
watch: {
    '$route': 'gettingData'
  },
  created() {
    this.gettingData()
  },
  methods: {
    // 获取数据
    gettingData() {
      var queryCardNoFirst = this.$route.query.cardNoFirst
      var queryCardNoEnd = this.$route.query.cardNoEnd

      this.cardNoFirst = queryCardNoFirst
      this.cardNoEnd = queryCardNoEnd
    }
  }

或者更简单的(接收参数的页面)

data() {
    return { 
      cardNoFirst: this.$route.query.cardNoFirst,
      cardNoEnd: this.$route.query.cardNoEnd
    }
  }

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐