Vue页面跳转传参

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

要进行传递参数的页面

首先，在相应的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
    }
  }