s-table相同路由不同参数的刷新问题

ant组件下的s-table

      <s-table
        ref="table"
        size="default"
        :rowKey="(record) => record.id"
        :columns="columns"
        :scroll="isScroll"
        :data="loadData"
        :alert="false"
        showPagination="auto"
        v-if="showRouterView"
      >

其中data数据是有要求的： 

// 加载数据方法 必须为 Promise 对象

 loadData方法

// 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        const params = {
          page: parseInt(requestParameters.pageNo),
          limit: parseInt(requestParameters.pageSize),
          order: requestParameters.order,
          sort: requestParameters.sort,
          goodsName: requestParameters.goodsName,
          orderSn: requestParameters.orderSn,
          storeName: requestParameters.storeName,
          rank: parseInt(requestParameters.rank),
          orderStatus: parseInt(requestParameters.orderStatus)
        }
        //params.orderType = this.$route.name === 'deliverPurchaseManagement' ? 3 : undefined
        return postPurchaseOrder(params)
          .then(res => {
            const { errno, errmsg } = res
            if (errno === 0) {
              const total = res.data && res.data.total ? res.data.total : 1
              var data = res.data && res.data.list ? res.data.list : []
              const result = {
                data: data,
                pageNo: parseInt(requestParameters.pageNo),
                pageSize: parseInt(requestParameters.pageSize),
                totalCount: parseInt(total),
                totalPage: Math.ceil(total / requestParameters.pageSize)
              }
              return result
            } else {
              this.$message.error(errmsg)
              return {
                data: [],
                pageNo: 1,
                pageSize: 10,
                totalCount: 0
              }
            }
          }).catch(() => {
            return {
              data: [],
              pageNo: 1,
              pageSize: 10,
              totalCount: 0
            }
          })
      }
    }

注释部分

params.orderType = this.$route.name === 'deliverPurchaseManagement' ? 3 : undefined

是不同路由跳转同一页面组件而改变的入参，调用的接口是一样的。

问题来了：虽然路径不同，但是页面是同一个，接口方法并没有被二次调用，跳转页面后数据还是第一张页面的。

解决思路：

watch监听路由，然后更新data数据。更新的时候我懵逼了，按理来说再次执行初始化方法就行了，不过这个loadData我搞不定，路过的好兄弟帮个忙解个惑叭。

最后采用了https://blog.csdn.net/q3254421/article/details/85342319的思路，使用v-if重新渲染当前页面组件

export default {
 data () {
  return {
   isRouterAlive: true
  }
 },
  watch: {
    '$route'(to, from) {
      if (to.name === 'deliverPurchaseManagement' || to.name === 'purchaseManagement') {
        this.reload()
      }
    }
  },
 methods: {
  reload () {
   this.showRouterView = false
   this.$nextTick(() => (this.showRouterView = true))
  } 
 }
}