Gridsome静态站点刷新后返回页面空白问题求助

问题分析 #

你遇到的问题核心是Gridsome静态生成特性导致的客户端路由缓存冲突：

• dev环境下，Gridsome动态构建页面，客户端路由切换时组件会重新初始化，数据正常加载；
• 生产环境build后，页面是预渲染的静态文件，当从刷新后的leaders页通过$router.push返回leadership页时，Vue Router会复用已有的组件实例，但预渲染的数据并未在客户端重新触发加载，导致页面空白；
• $forceUpdate()仅触发组件重渲染，但如果数据本身未正确初始化（比如依赖静态生成时的上下文），重渲染也无法解决空白问题。

可行解决方案 #

方案1：直接用原生跳转强制刷新页面 #

放弃Vue Router的客户端跳转，改用window.location.href直接跳转，强制重新加载leadership页的静态资源和数据：

// leaders页 closeNavigation 方法修改
closeNavigation (){
    console.log(this.internal);
    if (this.internal){
        // 直接跳转，强制刷新目标页
        window.location.href = '/about/leaders-and-experts/';
    } else {
        this.$router.go(-1);
    }
}

优点：简单直接，无需修改目标页代码；缺点：跳转时会有页面刷新的白屏。

方案2：让leadership页在客户端重新获取数据 #

修改leadership页，在客户端路由进入时主动重新拉取数据，而不是依赖静态生成的内容：

// leadership页 代码修改
<script>
export default {
  // 原静态生成数据逻辑保留（build时预渲染用）
  async asyncData({ app }) {
    const leaders = await app.$axios.$get('/api/leaders-list');
    return { leaders };
  },
  mounted (){
    console.log('mount cardsTeam');
    // 检测从刷新后的leaders页返回的标识
    if (localStorage.getItem('refresh')){
      this.refreshLeaders();
      // 用完清除标识，避免重复触发
      localStorage.removeItem('refresh');
    }
  },
  methods: {
    // 客户端重新获取数据的方法
    async refreshLeaders() {
      const freshData = await this.$axios.$get('/api/leaders-list');
      this.leaders = freshData;
    }
  }
}
</script>

同时保留leaders页的原有逻辑，设置localStorage后用$router.push跳转。
优点：无页面刷新，体验流畅；缺点：需要额外维护客户端数据获取逻辑。

方案3：给router-view添加key强制组件重渲染 #

在项目的根Layout组件中，给<router-view>添加key="$route.fullPath"，让每次路由变化都重新渲染组件：

<!-- Layout.vue 中修改router-view -->
<router-view :key="$route.fullPath"></router-view>

优点：一劳永逸，解决所有类似路由切换的组件缓存问题；缺点：所有路由切换都会重新渲染组件，可能带来轻微性能损耗（一般可忽略）。

为什么原方案无效？ #

$forceUpdate()只是强制组件重新渲染，但如果组件的数据源是静态生成时注入的，客户端路由切换时该数据源并未更新，渲染的还是空数据或未初始化的状态，所以页面依然空白。必须确保数据在客户端重新加载，或者强制页面/组件重新初始化。

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