Vue.js 使用 router-link url 变化时页面数据不更新的解决方案

最近在做一个 Vue.js 的小项目，遇到了这样一个问题：当使用 router-link 跳转后， URL 由 /article/news 变化成 /article/help 时，页面没有刷新。

路由配置：

{
    path: '/article/:alias',
    component: () => import('@/views/article/List')
}

组件中的数据，是通过 axios 请求，根据 alias 参数动态获取并渲染的，问题就出现在这里。

官方文档参考：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

所以无论是 /article/news，还是 /article/help，其实都是调用的同一个组件 @/views/article/List，只是在组件内部获取到请求参数，然后异步获取并渲染数据，所以会出现 url 变化，页面不更新的问题。

解决这个方案，可以在其父组件的 router-view 中加一个 key 属性。

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

这样就完美解决了。