vue项目url变化页面却不刷新，如何解决？

问题

分别打开两个详情页面，复制其中一个到另一个的地址栏中输入url，按回车键，页面却没有刷新，怎么回事？

思考

由于vue项目采用hash模式，详情页面采用同一组件，vue官方文档这样解释：
提醒一下，当使用路由参数时，例如从 /user/foo 导航
到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

最快解决方案

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