VUE传入参数到另一个页面

直接路由跳转带参数

这里用router-link写的 也可以用router.push
查看他俩的区别

$router.push和 ＜router-link＞ 的区别

***1.0传参并跳转 ***

这里用router-link :to name为路由，params为参数 ,scope.row.jingdu是从后台获取的值，传给表格tableData了

**这里**

   <el-table-column
      label="地图测试"
      sortable
      width="240"
      column-key="date"
      :filter-method="filterHandler"
    >
      <template slot-scope="scope">
        <router-link :to="{name:'Map',params:{jingdu:scope.row.jingdu,weidu:scope.row.weidu} }">查看</router-link>
      </template>
    </el-table-column>

2.0获取值的页面 （刷新也不回变空）

2.1： 不用配置props的写法： {{$route.params.参数}}

 {{ $ router.params.jingdu}}

2.2： {{参数}}的写法

2.1.0 配置router包下的index.js里的路由 添加参数个props:true

2.1.1 接收参数的页面 添加props

**古董写法:用watch监听，但是刷新后会获取不到值

这里用的< router:link>跳转的：**
接收参数的页面

<template>
  <div>
   <b>经度：{{jingDu}}</b>  <b>纬度：{{weiDu}} </b>  <b>地点 {{address}}</b>
  </div>
</template>

<script>
  export default{

    created() {
      this.getParam();
    },
    methods: {
            getParam(){
              var  jingDu = this.$route.params.jingDu;
              var  weiDu = this.$route.params.weiDu;
              var  address = this.$route.params.address;
              this.jingDu = jingDu;
              this.weiDu = weiDu;
              this.address = address;
              console.log(Jingdu)
            }

    },
    watch:{
      '$route':'getParam'
    }
  }

</script>

发送参数的页面 row是选中的行

**这里调用函数**
<el-table-column label="地点">
      <template slot-scope="scope">
<!--        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
       <el-button
          size="mini"
          type="danger"
          :type="scope.row.address === null ? 'info' : 'danger'"
          @click="handleMap(scope.$index, scope.row)">查看</el-button>

           <!-- <el-tag
              style=" font-size:22px "
              @click="handleMap(scope.$index, scope.row)
              :type="scope.row.address === null ? 'primary' : 'danger'"
              disable-transitions>{{scope.row.address}}</el-tag> -->
      </template>
    </el-table-column>


**下面是函数**
  handleMap(index, row) {
                        this.$router.push( {
                          path: '/map',  //路由
                          name: 'Map',    //页面
                          params: {
                                jingDu:row.jingDu,
                                weiDu:row.weiDu,
                                address:row.address
                          }
                        })

                },

https://www.cnblogs.com/vsmart/p/9337272.html