vue通过路由传递参数

场景：

  点击页面编辑按钮进入编辑页面，将当前行的数据带入编辑页面

从图示的编辑点击进入编辑页面

 

项目结构：项目是通过vue2构建的，模板用的是ElementUI

路由代码如下图：

首页代码如下：

 <template>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column fixed='right' lable='操作' width='100'>
          <template slot-scope = 'scope'>
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="goEditPage(scope.row)">编辑</el-button>
          </template>
      </el-table-column>
    </el-table>
  </template>
<script>
export default {
  data () {
    return {
      tableData: [{
        date: '1991-10-10',
        name: '顾XX',
        address: '江苏南京'
      }, {
        date: '1993-01-17',
        name: '蔡XX',
        address: '上海宝山'
      }, {
        date: '2017-07-17',
        name: '王XX',
        address: '江苏盐城'
      }]
    }
  },
  methods: {
    handleClick: function (value) {
      console.log(value.date + ',' + value.name)
      // 点击查看，弹框展示信息
      this.$alert(value.date, value.name, {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          })
        }
      })
    },
    goEditPage: function (value) {
      // 携带当前数据跳转到编辑页面
      this.$router.push({
        path: '/edit',
        query: {
          name: value.name,
          date: value.date,
          address: value.address
        }
      })
    }
  }
}
</script>

跳转就是通过：this.$(router).push()进行传值

进入到目标页面通过this.$route.query.XX进行获取，如下代码

<template>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="名称">
            <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-input v-model="formLabelAlign.date"></el-input>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input v-model="formLabelAlign.address"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
  data () {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: this.$route.query.name,
        date: this.$route.query.date,
        address: this.$route.query.address
      }
    }
  }
}
</script>

页面效果：