个人中心和订单列表页面之间的跳转

为什么从个人中心页面点击“全部订单”会跳转到订单列表的“全部”，点击“待支付”、“已完成”和“已取消”也是跳转到订单列表的“全部”呢？

相关代码：List.vue

<template>
  <!-- 我的订单列表页面 -->
  <div class="page-order-list">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="goToLink"
    />
    <!-- 订单按状态切换 -->
    <van-tabs v-model="status" @click="tabChange">
      <van-tab
        v-for="(value, key, index) in constants.ORDER_STATUS"
        :title="value"
        :name="key"
        :key="index"
      ></van-tab>
    </van-tabs>
    <!-- 订单记录 -->
    <div class="order-list">
      <div
        class="order-item"
        v-for="item in dataList"
        :key="item.sn"
        v-show="item.sn"
      >
        <div class="order-head">
          <div class="order-num">订单号：{{ item.sn }}</div>
          <div class="order-status text-warning">
            {{ constants.ORDER_STATUS[item.status] }}
          </div>
        </div>
        <div class="order-body">
          <div class="left">
            <van-image
              width="100"
              height="100"
              :src="item.item_first.flash_img"
            />
          </div>
          <div class="right">
            <div class="title">{{ item.item_first.flash_name }}</div>
            <div class="remark">{{ item.item_first.remark }}</div>
          </div>
        </div>
        <div class="order-footer">
          <div>总共{{ item.buy_count }}件商品 合计 ￥{{ item.buy_amount }}</div>
          <van-button
            round
            size="small"
            type="warning"
            v-if="item.status == constants.ORDER_STATUS_PAY"
            @click="goPay(item)"
            >去支付</van-button
          >
          <van-button
            round
            size="small"
            type="warning"
            v-if="
              item.status == constants.ORDER_STATUS_DONE ||
              item.status == constants.ORDER_STATUS_CANCEL
            "
            @click="deleteOrder(item)"
            >删除订单</van-button
          >
          <van-button round size="small" type="info">订单详情</van-button>
          <van-button round size="small" type="info" @click="toHealthyRequired"
            >健康信息验证</van-button
          >
          <van-button
            round
            size="small"
            type="info"
            @click="toPlaceControl(item.sn)"
            >入场管理</van-button
          >
          <van-button
            round
            size="small"
            type="info"
            @click="toRiskPlan(item.sn)"
            >风险预案</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { OrderApis } from '@/utils/apis'
import { ajax } from '@/utils/ajax'
import * as constants from '@/utils/constants'
export default {
  data () {
    return {
      status: 0,
      // 订单列表
      dataList: [],
      constants
    }
  },
  watch: {
    $route () {
      this.loadData()
    }
  },
  methods: {
    toHealthyRequired () {
      this.$router.push('/healthy')
    },
    toPlaceControl (e) {
      this.$router.push('/place_control?ticket_id=' + e)
    },
    toRiskPlan (e) {
      this.$router.push('/risk_plan?ticket_id=' + e)
    },

    /**
     * 删除订单
     */
    deleteOrder (item) {
      // 弹框确认
      this.$dialog
        .alert({
          title: '温馨提示',
          message: '删除订单将无法恢复，确认删除订单？'
        })
        .then(() => {
          // 调用接口
          const url = OrderApis.orderDetailUrl.replace('#{sn}', item.sn)
          ajax.delete(url).then((res) => {
            // 告诉用户已经删除成功了
            // 隐藏界面上的显示
            if (res.status === 201) {
              this.$notify({
                type: 'success',
                message: '删除成功'
              })
              item.sn = ''
            }
          })
        })
    },
    /**
     * 跳转到支付页面
     */
    goPay (item) {
      this.$router.push({ name: 'OrderPay', params: { sn: item.sn } })
    },
    /**
     * tab点击之后，重新去获取数据
     */
    tabChange (name, value) {
      console.log(name, value)
      this.$router.push({ name: 'OrderList', params: { status: name } })
    },
    /**
     * 加载页面的数据
     */
    loadData () {
      // 订单状态
      this.status = this.$route.params.status
      // 清空数据
      this.dataList = []
      // 加载数据列表
      this.getDataList()
    },
    /**
     * 加载订单列表
     */
    getDataList () {
      ajax
        .get(OrderApis.orderListUrl, {
          params: {
            status: this.status
          }
        })
        .then(({ data }) => {
          this.dataList = data.objects
          console.log(this.dataList)
        })
    },
    goToLink () {
      this.$router.push('/Mine')
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>
<style lang="less">
.page-order-list {
  .order-list {
    padding: 10px;
    .order-item {
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 10px;

      .order-head {
        display: flex;
        justify-content: space-between;
        .order-num {
          font-size: 12px;
        }
        .order-status {
          font-size: 13px;
        }
      }
      .order-body {
        padding: 10px 0;
        display: flex;
        .left {
          width: 100px;
          height: 100px;
        }
        .right {
          flex: 1;
          text-align: left;
          padding-left: 10px;
          .title {
            font-size: 16px;
            padding: 5px 0;
          }
          .remark {
            font-size: 12px;
            color: #999;
          }
        }
      }
      .order-footer {
        text-align: right;
        font-size: 12px;
        .van-button {
          margin-right: 5px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>

相关代码：Mine.vue

<template>
  <!-- 个人中心 -->
  <div class="page-mine">
    <!-- 标题 -->
    <van-nav-bar title="个人中心" fixed/>
    <!-- 用户基本信息：头像、昵称 -->
    <div class="user-header">
      <div class="avatar" v-if="user.avatar">
        <img :src="user.avatar" />
      </div>
      <div class="avatar" v-else>
        <img src="/static/mine/avatar.png" />
      </div>
      <div>
        <p>欢迎您，{{ user.nickname }}</p>
        <a class="btn-link" href="#" @click="logout">退出登录</a>
      </div>
    </div>
    <!-- 订单的菜单列表 -->
    <van-row class="user-links">
      <van-col span="6">
        <router-link
          :to="{name: 'OrderList', params: {status: constants.ORDER_STATUS_ALL}}">
          <van-icon name="records" />
          <span>全部订单</span>
        </router-link>
      </van-col>
      <van-col span="6">
        <router-link
          :to="{name: 'OrderList', params: {status: constants.ORDER_STATUS_PAY}}">
          <van-icon name="pending-payment" />
          <span>待支付</span>
        </router-link>
      </van-col>
      <van-col span="6">
        <router-link
          :to="{name: 'OrderList', params: {status: constants.ORDER_STATUS_DONE}}">
          <van-icon name="tosend" />
          <span>已完成</span>
        </router-link>
      </van-col>
      <van-col span="6">
        <router-link
          :to="{name: 'OrderList', params: {status: constants.ORDER_STATUS_CANCEL}}">
          <van-icon name="logistics" />
          <span>已取消</span>
        </router-link>
      </van-col>
    </van-row>
    <!-- 底部导航 -->
    <TripFooter/>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { AccountsApis } from '@/utils/apis'
import * as types from '@/store/mutation-types'
import { ajax } from '@/utils/ajax'
import TripFooter from '@/components/common/Footer'
import * as constants from '@/utils/constants'

export default {
  components: {
    TripFooter
  },
  data () {
    return {
      constants
    }
  },
  methods: {
    /**
     * 查询用户信息
     */
    getUserInfo () {
      ajax.get(AccountsApis.useInfoUrl).then(({ data }) => {
        console.log('Mine-getUserInfo', data)
        this.$store.commit(types.UPDATE_USER_INFO, data)
      })
    },
    /**
     * 退出登录
     */
    logout () {
      // 1. 调用接口，退出登录
      ajax.get(AccountsApis.logoutUrl).then(() => {
        // 2. 提示用户
        this.$notify({
          message: '欢迎下次再来',
          type: 'success'
        })
        // 3. 删除用户登录的信息
        this.$store.commit(types.DELETE_USER_INFO)
        // 4. 跳转到首页去
        this.$router.push({name: 'Home'})
      })
    }
  },
  computed: mapState(['user']),
  mounted () {
    this.getUserInfo()
  }
}
</script>
<style lang="less">
.page-mine {
  .van-nav-bar--fixed {
    background-color: transparent;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .user-header {
    background: url(/static/mine/bg.jpg) no-repeat center;
    background-size: 100% auto;
    color: #fff;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .avatar img {
      width: 80px;
      height: 80px;
    }
  }
  .user-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
  .btn-link {
    color: #fff;
  }
}
</style>

相关代码：constants.js

/**
* 项目中所使用到的常量
*/
export const APP_VERSION = '1.0'
export const APP_PLATFORM = 'h5'
// 订单状态
export const ORDER_STATUS_ALL = 0
// 待支付
export const ORDER_STATUS_PAY = 11
// 已完成
export const ORDER_STATUS_DONE = 12
// 已取消
export const ORDER_STATUS_CANCEL = 13
export const ORDER_STATUS = {
  [ORDER_STATUS_ALL]: '全部',
  [ORDER_STATUS_PAY]: '待支付',
  [ORDER_STATUS_DONE]: '已完成',
  [ORDER_STATUS_CANCEL]: '已取消'
}