Vue+element实现组件（表格）之间的传值（路由方式）_element plus 怎么把一个vue文件中的值传给另一个文件

初次接触vue项目，关于vue组件之间传值的方式：
1、通过vue的store仓库（大项目适用）
2、props（父子组件）
3、路由传值（最简单的方式）
我们先讲第三个：
这是我的从后台接受到的数据渲染到表格的数据：

 <el-table
          style="width: 90%"
          class="psHeight"
          @selection-change="handleSelectionChange"
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="jur_id"
            label="id"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="jur_name"
            label="姓名"
            align="center"
           >
          </el-table-column>
          <el-table-column
            prop="jur_tel"
            label="电话号码"
            width="180"
            align="center">
          </el-table-column>
          <el-table-column
            prop="jur_shu"
            label="权限属性"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="jur_jur"
            label="权限"
            width="150"
            align="center">
          </el-table-column>
          <el-table-column
            prop="jur_isNo"
            label="是否禁用"
            align="center">
          </el-table-column>
          <el-table-column label="操作"
                           width="150"
                           align="center">
            <template slot-scope="scope">


              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">
                <i class="el-icon-edit-outline"></i>
              </el-button>


              <el-button
                size="mini"
                @click.native.prevent="handleDelete(scope.$index, tableData)">
                <i class="el-icon-delete"></i>
              </el-button>

            </template>
          </el-table-column>
        </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

渲染到页面是这样的：

我们需要点击某一行获取到这一行的数据，很好的是elementui已经帮我们封装了一个方法：handleEdit(scope.$index, scope.row)，按照官网api可以在methods里面写入这个方法获取：

methods：{
handleEdit(index, row) {
console.log(row)//row中就包含了你点击的那一行的数据
console.log(row.jur_name);//打印出这一行的jur_name（“honey”）
//这里的jur_name是我自己通过Ajax请求后台的数据的来的，你们的根据自己的定。
this.$router.push({name:'jur_name',query:{jur_name:row.jur_name}})
}
}
1
2
3
4
5
6
7
8

1、其中要使用$router需要在vue-cli脚手架的src中的main.js中进行如下引入路由文件：

import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)
});
1
2
3
4
5
6
7
8

2、name:'jur_name’表示你需要跳转的组件名

最后就是在jur_name这个组件中接收值：

<p class="juall" >当前用户：<span>{{this.$route.query.jur_name}}</span></p>
1

搞定！！！