路由传参跳转到另一个页面，参数已经携带了但是页面不刷新？

Question

点击设备所在位置下面的两条数据，路由传参传caller_id和triage_desk_id
点击第一条数据caller_id传的是0

点击第二条数据caller_id传的是1

下面是跳转后的页面，triage_desk_id是1的话展示到对应的数据，caller_id是0默认展示图片右侧表格的第一条数据

caller_id传的是1的时候展示的是叫号器2的这条数据

现在的问题就是，第一次跳转的页面的携带的参数可以正常的找到对应的数据，当第二次跳转携带不同的参数，跳转后的页面展示的还是第一次跳转后页面展示的数据。caller_id第一次传的是0展示的没问题，第二次caller_id传的是1展示的还是第一次传0的展示数据，应该是传不用的参数展示不同的参数。请问这个问题怎么解决呢？

<ele-split-layout
        width="266px"
        :allow-collapse="false"
        :right-style="{ overflow: 'hidden' }"
      >
        <!-- 表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          height="calc(100vh - 265px)"
          :need-page="false"
          :toolkit="[]"
          :current.sync="current"
          :highlight-current-row="true"
          class="dict-table"
          tool-class="ele-toolbar-actions"
          @done="done"


data（）{
  return {
     triage_desk_id: this.$route.query.triage_desk_id, // 分诊台
  }
}
 methods: {
    /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      return getTriageList({ ...where, ...order, page, limit })
    },
    /* 表格渲染完成回调 */
    done(res) {
      if (res.data?.length) {
        let data = res.data
        if (this.triage_desk_id) {
          data.forEach((element, i) => {
            if (element.id == this.triage_desk_id) {
              this.$refs.table.setCurrentRow(res.data[i])
            }
          })
        } else {
          this.$refs.table.setCurrentRow(res.data[1])
        }
      }
    },
}

 watch: {
    $route: {
      immediate: true,
      handler() {
        if (this.$route.query.triage_desk_id) {
          this.$nextTick(() => {
            this.reload()
          })
        }
      }
    },
  },

跳转后的页面左侧表格和右侧表格是两个组件
上面的代码是左侧表格的代码
下面的代码是右侧表格的

<ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        :current.sync="current"
        height="calc(100vh - 265px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        cache-key="systemDictDataTable"
        :highlight-current-row="highlight"
        class="dict-table"
        @done="done"
        :toolkit="['reload']"
      >

data() {
  return {
     caller_id: this.$route.query.caller_id //叫号器
}
}

methods: {
   /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      return getCellList({
        ...where,
        ...order,
        page,
        limit,
        triage_desk_id: this.triageId
      })
    },
  done(res) {
      if (res.data?.length) {
        let data = res.data
        if (this.caller_id) {
          data.forEach((element, i) => {
            if (element.id == this.caller_id) {
              this.$refs.table.setCurrentRow(res.data[i])
              this.highlight = true
            } else {
              this.$refs.table.setCurrentRow(res.data[0])
            }
          })
          console.log(this.callId);
        } else {
          this.$refs.table.setCurrentRow(res.data[0])
        }
      }
    }
}

watch: {
    triageId() {
      this.reload()
    },
    $route: {
      immediate: true,
      handler() {
        if (this.$route.query.caller_id) {//需要监听的参数
          this.$nextTick(() => {
            this.reload()
          })
        }
      }
    },
  }

我是使用watch监听路由参数的变化，有变化就重新刷新一下表格。
但是路由参数发生了变化，展示的数据还是不对的，请问这个应该咋解决呢？？

Answer 1

给 router-view 加个 key 试试，key 就是完整路由

App.vue

<template>
    <router-view :key="$route.fullPath"></router-view>
</template>