vue路由组件传值

前言

例如：el-table表格中的某一列数据（标题）是被包裹在router-link中的，点击某一个标题，跳转到对应标题的研发项目问题界面。

---

一、组件一(传值)

1.element-ui界面

<el-table
:data="list"
:header-cell-style="tableHeaderCellStyle"
:cell-style="tableCellStyle"
style="width: 100%">
	<el-table-column label="标题" align="center">
	  <template slot-scope="scope">
	     <router-link target="_blank" :to="{ path: '/bidding/content', query: { title: scope.row.标题 } }">
	         <span id="title">{{scope.row.标题}}</span>
	     </router-link>
	  </template>
	</el-table-column> 
	<el-table-column label="操作" align="center">
	  <template slot-scope="scope">
	     <router-link target="_blank" :to="{ path: '/bidding/content', query: { title: scope.row.标题 } }">
	       <el-button id="problems" type="success" size="small">研发项目问题</el-button>
	      </router-link>
	   </template>
	</el-table-column>
</el-table>

router-link 传给另一个组件现在点击的标题

<router-link target="_blank" :to="{ path: '/bidding/content', query: { title: scope.row.标题 } }">
	    <span id="title">{{scope.row.标题}}</span>
</router-link>

2.JS部分

<script>
import { getResource } from "@/api/rdp";
export default {
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
      },
      titles: null,
      flag: true
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      getResource(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        this.titles=Object.keys(this.list[0].问题[0])
      });
    },
    // 表格样式
    tableHeaderCellStyle({ rowIndex }) {
      if (rowIndex === 0) {
        return "background: rgba(37, 111, 178, 0.6); color: #fff; border: 1px solid #dfe2e5; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);";
      }
    },
    tableCellStyle() {
      return "border: 1px solid #d6d5d5;";
    },
  },
};
</script>

一、组件二(接收值)

1.element-ui界面

<template>
  <div id="app-container">
    <div id="table-wrap"> 
        <el-table
        :data="list"
        :header-cell-style="tableHeaderCellStyle"
        :cell-style="tableCellStyle"
        style="width: 100%">
            <el-table-column 
                v-for="(item,index) in titlesArr"
                :key="index"
                show-overflow-tooltip
                :label="item"
                align="center">
                <template slot-scope="scpoe">
                    {{scpoe.row[item]}}
                </template>
            </el-table-column>
	    </el-table>
    </div>
  </div>
</template>

2.JS部分

将接收的值当作get请求的参数，得到对应标题的数据

<script>
import { getProblems } from "@/api/rdp";
export default {
  data() {
    return {
      list: null,
      title: null,
      titlesArr: null
    };
  },
  created(){     
    // 接收router-link传过来的参数
	this.title = this.$route.query.title
    // console.log(this.$route.query.title)
    this.fetchData()
  },
  methods: {
    fetchData() {
      getProblems({title:this.title}).then((response) => {
        this.list = response.data.问题;
        this.titlesArr=Object.keys(this.list[0])
      });
    },
    // 表格样式
    tableHeaderCellStyle({ rowIndex }) {
      if (rowIndex === 0) {
        return "background: rgba(37, 111, 178, 0.6); color: #fff; border: 1px solid #dfe2e5; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);";
      }
    },
    tableCellStyle() {
      return "border: 1px solid #d6d5d5;";
    },
  },
};
</script>

---