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

作者站长头像
站长
· 阅读数 13

点击设备所在位置下面的两条数据,路由传参传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监听路由参数的变化,有变化就重新刷新一下表格。但是路由参数发生了变化,展示的数据还是不对的,请问这个应该咋解决呢??

回复
1个回答
avatar
test
2024-06-26

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

App.vue

<template>
    <router-view :key="$route.fullPath"></router-view>
</template>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容