Vue page jump con parámetros

Requisitos del proyecto: el usuario hace clic en un pedido en la lista de pedidos para ingresar a la página de detalles del pedido

Nota: El menú de nivel superior es la gestión de transacciones y la dirección de enrutamiento es trans, como se muestra en la Figura 1; la dirección de enrutamiento del menú de gestión de pedidos es: pedido, como se muestra en la Figura 2; la dirección de enrutamiento del menú de detalles del pedido es: detalle, como se muestra en la Figura 3. Esta dirección de enrutamiento se usa cuando salta la página siguiente

1. Vaya a la página de detalles del pedido desde el número de pedido

 <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. La página de detalles del pedido recibe los parámetros transmitidos desde la página principal

1. Botón Volver a la página de pedido

<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. Recibir el número de pedido transmitido por la página principal

created() {
    //获取父页面传送过来的订单号   此this.$route.query.orderNumber为父页面<router-link>标签中query中的orderNumber
    const orderNum = this.$route.query.orderNumber;
    this.orderId = orderNum;
    //获取订单详情方法
    this.getOrderDetail(orderNum);
  },