乐趣区

关于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 办法了。

退出移动版