请教一个vue-router刷新问题

Question

我在其他页面this.$router.go('/')它会跳到Index（首页），我想home里v-header和v-sidebar组件数据也得重新刷新一下，home作为根组件各种跳转只会在他里面跳，home本身里面的组件并不会刷新，请问有没有办法，我在别的页面返回index的时候，连同home里的组件一起刷新，以下是我路由和home模版代码

 routes: [{
  path: '',
  component: Home,
  children: [{
      path: '/',
      component: Index,
      name: "Index",
    },
    {
      path: '/goods',
      component: GoodsRelease,
    } 
  ]
}]

home模版

<template>
  <div>
    <v-header></v-header>
    <div class="wrapper">
      <v-sidebar></v-sidebar>
      <div class="content">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

Answer 1

可以箭头路由变化 实现数据更新 ：

 watch: {
   $route (to, from) {
     //对应数据更新操作
   }
 }

Answer 2

这么操作监听路由的变化：

watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

Answer 3

在 home 组件里监听 $route 的变化。