vue-route 切换 视图不更新

Posted A_Ghost

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-route 切换 视图不更新相关的知识,希望对你有一定的参考价值。

问题:
在使用了相同组件之后,切换路由,不执行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 方法了。

以上是关于vue-route 切换 视图不更新的主要内容,如果未能解决你的问题,请参考以下文章

Android:在视图/活动/片段之间滑动切换

ForYouFragment 片段不更新

切换组件不更新视图

IllegalArgumentException:快速切换 ActionBar 选项卡时没有找到片段 id 的视图

不更新片段中的回收站视图

如何在滚动列表视图上显示/隐藏底部导航视图?