Vue 中使用 router-link 后，URL 变化但是页面

背景

今天在项目中遇到了这样的问题: 当使用 router-link 跳转后， URL 由 /uuid/iqwuei-qweqwr 变化成 /uuid/132sak-djkasd (都是虚构的 uuid)，页面没有刷新。

原因

我在全局监听了 $route，但是这次跳转是由 { name: 'uuid', params: { uuid: 'iqwuei-qweqwr' } } 到 { name: 'uuid', params: { uuid: 'iqwuei-qweqwr' } }，并没有触发监听的事件。参考官方文档，这是为了节约资源而采用的组件复用。

解决方案

在父组件的 router-view 中加一个 key，例如：

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