单据到单据详情，vue-element-admin页面跳转实现（新开标签）

需求实现分3个点：

1、原页面跳转代码编写，包括参数传递
2、目标跳转页面参数接收与数据查询
3、返回功能实现

第一步
在前端页面添加点击事件loadInfo()

<el-table v-loading="loading" :data="materialInfoList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="物料编码" align="center" prop="materialCode" width="150">
        <template slot-scope="scope">
            <span style="color:#06d;" @click="loadInfo(scope.row.materialId)">{{ scope.row.materialCode}}</span>
        </template>
    </el-table-column>
    <el-table-column label="物料名称" align="center" prop="materialName" width="150"/>
    <el-table-column label="物料分类" align="center" prop="materialtypeName" />
    <el-table-column label="物料规格" align="center" prop="materialSpec" width="100"/>
    <el-table-column label="单位" align="center" prop="unitName" />
    <el-table-column label="创建用户" align="center" prop="createdUser" />
    <el-table-column label="创建姓名" align="center" prop="createdName" />
    <el-table-column label="创建时间" align="center" prop="createdTime" />
    <el-table-column label="更新用户" align="center" prop="updatedUser" />
    <el-table-column label="更新姓名" align="center" prop="updatedName" />
    <el-table-column label="更新时间" align="center" prop="updatedTime" />
    <el-table-column label="备注信息" align="center" prop="remark" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['basic:materialInfo:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['basic:materialInfo:remove']">删除</el-button>
        </template>
    </el-table-column>
</el-table>

loadInfo()方法
注意path后接的是目标页面的路由地址，query后接的是参数

this.$router.push({})实现路由跳转

/**跳转到详情页 */
loadInfo(materialId){
    this.$router.push({
        path: '/basic/material/materialDetail',
        query: {
            materialId:materialId
        }
    })
}

页面效果

第二步
获取上个标签页传来的参数进行数据查询

vue.js中created方法作用

//获取物料信息
getInfo() {
    if (this.$route.query.materialId != null && this.$route.query.materialCode != '' && this.$route.query.materialId != undefined) {
        getMaterialInfo(this.$route.query.materialId).then(res => {
            this.materialInfo = res.data;
        })
    }
},
created() {
    this.getInfo();
}

跳转效果

第三步
“返回”按钮的实现

vue-element-admin关闭当前标签页

/**
 * 返回上级路由
 */
back() {
    // 调用全局挂载的方法,关闭当前标签页
    this.$store.dispatch("tagsView/delView", this.$route);
    // 返回上一步路由，返回上一个标签页
    this.$router.go(-1);
},

返回的效果即关闭当前标签页，返回上一步路由