Project requirements: The user clicks on an order in the order list to enter the order details page
Note: The upper-level menu is transaction management, and the routing address is trans, as shown in Figure 1; the routing address of the order management menu is: order, as shown in Figure 2; the routing address of the order details menu is: detail, as shown in Figure 3. This routing address is used when the next page jumps
1. Jump to the order details page from the order number
<router-link :to="{path:'/路由地址',query:{传到详情页的参数}}"
<el-table-column label="订单编号" align="center" prop="orderNumber" width="230px">
<template slot-scope="scope" :show-overflow-tooltip="true">
<router-link :to="{path:'/trans/detail',query:{orderNumber:scope.row.orderNumber}}" class="link-type">
<span>{
{ scope.row.orderNumber }}</span>
</router-link>
</template>
</el-table-column>
2. The order details page receives the parameters transmitted from the parent page
1. Return to order page button
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-back"
size="mini"
@click="handleClose"
>返回上一页</el-button>
</el-col>
</el-row>
/** 返回按钮操作 */
methods: {
handleClose() {
const obj = { path: "/trans/order" };
this.$tab.closeOpenPage(obj);
}
}
2. Receive the order number transmitted by the parent page
created() {
//获取父页面传送过来的订单号 此this.$route.query.orderNumber为父页面<router-link>标签中query中的orderNumber
const orderNum = this.$route.query.orderNumber;
this.orderId = orderNum;
//获取订单详情方法
this.getOrderDetail(orderNum);
},