关于vue.js:vueroute-切换-视图不更新

问题：
在应用了雷同组件之后，切换路由，不执行created 和 mounted 办法，无奈获取数据
例如：从 /gameInfo 切换到 /gameInfo/details 只有第一次切换的时候，会执行 mounted，之后就不会执行 mounted了。

解决：
1，通过 watch 监听 以后页面的 route 变动

  watch: {    '$route': function() {      // 首页刷新之后,第一次没有监听 route ,第二次之后,才开始执行      console.log('route',this.$route)    }  },

2，在 <router-view> 增加 key 属性

<keep-alive>   <router-view :key="$route.path"  /></keep-alive>

以上是网上的解决办法。
但我遇到的问题，仍旧没有解决，最初排查发现，是 <router-view> 的地位有问题。

// layout/index.vue<template>  <div>    <top-menu />    <game-menu v-if="$route.path != '/home'" />    <transition name="fade-transform" mode="out-in">      <keep-alive>        <router-view :key="$route.path"  />      </keep-alive>    </transition>  </div></template>

此时 <router-view> 监听的是 里面的导航，所以，当我点击 <game-menu /> 组件里的导航栏，页面并不会更新。
最初将 <router-view> 放到了 <game-menu /> 里，问题解决，每次切换路由，都会执行 mounted 办法了。