vue3路由跳转导致 路由之外的组件不刷新

在Vue3中，当你使用路由（例如Vuex Router）进行导航时，如果只是简单地通过`this.$router.push()`或`this.$router.replace()`跳转到新的路由，可能不会自动更新当前页面之外的其他非激活组件的状态。

这是因为Vue的渲染机制依赖于组件树的更新和懒加载策略。当路由切换时，Vue只会重新渲染当前被激活的组件（即新路由对应的组件），而不会去刷新那些还未进入视图范围的组件。

为了解决这个问题，你可以尝试以下几个方法：

1. **手动刷新**: 在需要更新的组件上添加一个生命周期钩子，如`beforeDestroy`，在此处触发数据的重载或刷新操作。

export default {
  beforeDestroy() {
    this.refreshData();
  },
  methods: {
    refreshData() {
      // 你的刷新逻辑
    }
  }
}

2. **使用`keep-alive`属性**: 如果这些组件可能会被再次激活，你可以考虑将它们放入`<router-view>`的`keep-alive`包裹，这样即使离开视图，也会缓存起来，下次路由返回时会被重新渲染。

<template>
  <div>
    <router-view :key="route.fullPath" keep-alive></router-view>
    <!-- 其他静态内容 -->
  </div>
</template>

3. **使用`$router.app.$forceUpdate()`**：虽然这不是最佳实践，但在某些特殊情况下，比如需要立即更新所有组件时，可以在路由切换后调用此方法强制整个应用的视图更新。

this.$router.push('/new-route').then(() => {
  this.$router.app.$forceUpdate();
});