<router-link :to="'/orderUpdate?oid='+order.oid">修改</router-link>

编写路由

xxxxxxxxxx   {    path: '/orderUpdate',    name: '修改订单',    component: () => import('../views/OrderUpdate.vue')  }

创建路由对应的vue页面

• 编写修改功能：先通过id查询详情，并回显到表单，修改内容后，提交表单

  <template>
    <div>
      <!-- 2.2 表单数据绑定 -->
      <table border="1">
        <tr>
          <td>编号</td>
          <td>
            <!-- 使用 v-model 进行表单元素的双向绑定 -->
            <!-- <input type="text" v-model="order.oid"> -->
            {{order.oid}}
          </td>
        </tr>
        <tr>
          <td>价格</td>
          <td>
            <input type="text" v-model="order.price">
          </td>
        </tr>
        <tr>
          <td>所属用户</td>
          <td>
            <input type="text" v-model="order.userId">
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <!-- 3 点击，并进行更新 -->
            <input type="submit" value="修改" @click="updateOrder">
          </td>
        </tr>
      </table>
      {{order}}
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        oid: '',      //1.1 订单id
        order: {      //2.1 用于表单元素数据绑定对象
  
        }
      }
    },
    methods: {
      async selectOrderById() {
        // 发送ajax
        let { data } = await this.$http.get(`/order/${this.oid}`)
        // 将查询结果存放
        this.order = data
      },
      async updateOrder() {
        //发送ajax
        let { data } = await this.$http.put('/order', this.order)
        //提示
        alert(data)
        //跳转
        this.$router.push('/orderList')
      }
    },
    mounted() {       //页面加载成功
      // 1.2 获得查询的id
      // console.info(this.$route)
      this.oid = this.$route.query.oid
      // 1.3 通过id查询
      this.selectOrderById()
    },
  }
  </script>
  
  <style>
  
  </style>