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

需求

在一个如下图的表格中

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

图表页面如下图：

解决方案

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

看代码：

重点就是

beforeRouteLeave(to, from, next) {
    this.$destroy(this.Chart)
    next()
  }

上面都是图表数据获取之类的代码。
这一段中，this.Chart是当前页面的图表组件。
图表组件是通过import Chart from '@/components/Charts/chart'，然后在compoents中注册来使用的。

刚开始接触前端，大家对这段代码有什么不明白的欢迎提问，如果这段代码有什么问题也欢迎指正。

ps:这样销毁组件的好处是每回进入这个页面只会对组件重新渲染，而不会对整个页面进行重新渲染，能避免不必要的资源浪费。