vue复用组件页面无法更新

问题场景：

<div id="app">
  <ul>
    <li><router-link to="/home/foo">To Foo</router-link></li>    
    <li><router-link to="/home/baz">To Baz</router-link></li>    
    <li><router-link to="/home/bar">To Bar</router-link></li>    
  </ul>    
  <router-view></router-view>
</div>

const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$route.params.name
    }
  }
}
const router = new VueRouter({
  mode:'history',
    routes: [
    {path: '/home', component: Home },
    {path: '/home/:name', component: Home }
  ]
})
new Vue({
  el: '#app',
  router
})
// 在路由构建选项 routes 中配置了一个动态路由 '/home/:name'，它们共用一个路由组件 Home，这代表他们复用 RouterView 。
// 当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，message 是没有变化的。

解决办法：

1. 通过 watch 监听 $route 的变化。

const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$route.params.name
    }
  },
  watch: {
       '$route': function() {
       this.message = this.$route.params.name
    }
    }
}
...
new Vue({
  el: '#app',
  router
})

2.给 <router-view>绑定key属性，这样 Vue 就会认为这是不同的 <router-view>。

<router-view :key="key"></router-view>

参考：https://github.com/xiaofuzi/deep-in-vue/issues/11