vue使用$router.push跳转页面组件不刷新、始终复用的问题

需求

在一个如下图的表格中

点击图表按钮可以跳转到图表页面，图表页面的数据是根据设备的序号调用web api来获取的。
遇到的问题是每次进入图表页面，参数是传过来了，但是图表始终是一个复用的状态，不会根据ID的不同进行重新渲染。

图表页面如下图：

解决方案

通过beforeRouteLeave来达到每次离开图表页面时，对图表页面的组件进行销毁的目的。

看代码：

<template>
  <div>
    <el-card>
      <Chart
        :key="hostId"
        :id="hostId"
        v-bind:option="option"
        :width="width"
      ></Chart>
    </el-card>
  </div>
</template>
<script>
import Chart from '@/components/Charts/chart'
// eslint-disable-next-line no-unused-vars
import { getMointInd