Vue之如何跳转页面并传递信息

本文已参与「新人创作礼」活动，一起开启掘金创作之路

vue页面之前的跳转是很常见的 而这个页面的数据怎么传递到另外一个页面呢？

需求场景：一个表格里的数据 点击查看 跳转另外一个页面并显示表格里的单条数据

代码实现如下：

<el-table
  :data="tableData"
  stripe
  :header-cell-style="{background:'#2c3871',color:'#FFFFFF'}"
  style="width: 100%">
  <el-table-column
    prop="judeid"
    label="举报编号"
    width="180">
  </el-table-column>
  <el-table-column
    prop="reason"
    label="举报理由"
    width="180">
  </el-table-column>
  <el-table-column
    prop="type"
    label="举报类型">
  </el-table-column>
  <el-table-column
    label="操作"
    width="180">
    <template slot-scope="tableData">
      <el-button @click="judeType(tableData.row)" type="primary" size="small">详情</el-button>

    </template>
  </el-table-column>
</el-table>

表格代码解释：

这行代码很简单 重要的是slot-scope="tableData" 用这个可以获取的table数据里的每一行数据

而具体是通过tableData.row来获取到的

这样我们就可以设置一个按钮 的点击事件来获取到这行数据 并传递到下一个页面

judeType(row){
  const _this = this
  _this.judeform.type = row.type
  _this.$router.push({
    path: '/judedetail',
    query: {
      type: row.type,
      reason: row.reason,
      fileid: row.fileid,
      checktype: row.checktype,
      judeid: row.judeid
    }
  })


}

代码解释：

我们可以通过传到这个方法的table里的数据来获取到我们想要的数据（ _this.judeform.type = row.type）

之后我们并可以通过_this.$router.push方法跳转到下一个页面并带参数 其中path是下一个页面的地址

query里面是我们下一个页面需要的参数

这样就可以实现携带参数跳转了

而这里我有点小知识要说的是 除了query ，也可以使用params来传参

不过query刷新之后传递的参数不会消失 而params会消失

而且query 传得参数都是显示在url 地址栏当中，而 params 传参不会显示在地址栏 所以如果隐私性的数据请不要使用query参数 可以考虑params 存储在localstorage中保存

而下一个页面怎么接受呢

代码如下：

<td>{{this.$route.query.judeid}}</td>
<td>{{this.$route.query.fileid}}</td>

直接就可以通过this.$route.query.judeid获取到传递过来的数据 从而使用它