vue 在当前页面watch 里面 监听router，重复调用问题

Posted 2023-03-28

参考技术A 在一个需求的开发中，由于需要根据不同的跳转页面进行不同的业务需求，所以在当前页面watch里面对router进行了监听，但是跳转到别的页面的时候，发现这个监听的router在重复调用，百思不得其解，在查阅文档之后发现，由于是当前页面被keep-alive包裹进行了缓存，由于缓存组件不会主动销毁，所以会出现重复监听的效果。所以，需要在router里面判断是否为指定页面。但是后来觉着这种方法带来的影响较大，所以不推荐在缓存页面中这样操作。

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 方法了。