解决Vue多同级组件共享Vuex模块仓库时路由直访数据缺失问题

这个问题我太熟了！核心原因一眼就能看出来：当你直接输入/foo/bar访问子路由时，父路由/foo对应的组件根本没被渲染，自然它的created钩子不会执行，也就没机会从API拉取数据存入store。而先切到/foo再回来时，父组件已经完成初始化，store里的数据就保留下来了。

下面给你几个靠谱的解决思路，按推荐程度排序：

1. 把数据逻辑移到路由守卫（beforeEnter）里 #

这是最直接的方案，把原来在父组件created里的API请求逻辑，挪到/foo路由的beforeEnter守卫中。这样不管是访问/foo还是它的子路由/foo/bar，只要进入这个路由分支，都会触发数据加载。

示例代码大概是这样：

const routes = [
  {
    path: '/foo',
    component: Foo,
    beforeEnter: (to, from, next) => {
      const fooStore = useFooStore(); // 这里根据你的Vuex/Pinia写法调整
      // 判断数据是否已存在，避免重复请求
      if (!fooStore.data) {
        fooStore.fetchDataFromAPI().then(() => {
          next();
        }).catch(err => {
          // 处理请求错误，比如跳转到错误页
          console.error(err);
          next();
        });
      } else {
        next();
      }
    },
    children: [
      { path: 'bar', component: FooBar }
    ]
  }
];

2. 让父组件始终渲染（即使访问子路由） #

如果你的页面结构允许，可以让父组件作为子路由的容器，始终存在于DOM中。这样不管访问哪个子路由，父组件的生命周期钩子都会在第一次加载时执行。

只要确保父组件的模板里包含<router-view>，用来渲染子组件就行：

<!-- Foo.vue -->
<template>
  <div class="foo-container">
    <!-- 父组件自身的内容 -->
    <router-view></router-view> <!-- 子路由组件会渲染在这里 -->
  </div>
</template>

<script setup>
import { useFooStore } from '@/stores/foo';
const fooStore = useFooStore();

onMounted(() => { // 用onMounted比created更稳妥，组件已挂载
  if (!fooStore.data) {
    fooStore.fetchDataFromAPI();
  }
});
</script>

这样当你直接访问/foo/bar时，父组件Foo会被渲染，它的onMounted钩子触发，数据就会加载到store里了。

3. 在子组件中主动触发数据加载（兜底方案） #

如果上面两种方案不适合你的场景，还可以在子组件FooBar的生命周期钩子中，检查store里是否有数据，如果没有就主动调用加载方法。

示例：

<!-- FooBar.vue -->
<script setup>
import { useFooStore } from '@/stores/foo';
const fooStore = useFooStore();

onMounted(() => {
  if (!fooStore.data) {
    fooStore.fetchDataFromAPI();
  }
});
</script>

不过这个方案有个小缺点：如果有多个子路由，每个子组件都要写一遍这个逻辑，有点冗余。所以更推荐前两种方案。

额外提示：用持久化插件（可选） #

如果你的数据不需要每次都从API拉取，可以考虑用持久化插件（比如pinia-plugin-persistedstate）把store数据存在localStorage/sessionStorage里。这样即使刷新页面，数据也不会丢失，不过这个要根据业务场景来判断是否适用。

内容的提问来源于stack exchange，提问作者devman