Nuxt.js 使用NuxtLink跳转首页时无数据的问题解决

这个现象是Nuxt基于Vue Router的路由复用机制导致的：

• 直接在地址栏输入域名访问时，会触发全页面加载流程，Nuxt会完整执行服务端渲染逻辑，自然会跑通首页的asyncData钩子拉取数据
• 从其他业务页面点击头部图片跳转回/时，Nuxt会对同路径的组件实例做复用：只要跳转前后的路由路径、参数没有发生可识别的变化，Nuxt不会重新初始化首页组件，也就不会触发asyncData的执行流程，最终出现只有模板结构、没有业务数据的情况

方法1：给跳转链接附加动态唯一参数，强制触发路由更新 #

在原来的NuxtLink上绑定动态生成的时间戳查询参数，让Nuxt判定为路由发生了实际变化，触发组件重新初始化和asyncData执行：

<NuxtLink :to="`/?ts=${Date.now()}`">
  <v-img
    max-height="24"
    src="/nuxt_static/images/rectangle.png"
    :contain="true"
  ></v-img>
</NuxtLink>

• 优点：改动量极小，不需要修改首页的业务逻辑
• 注意：这种方式会在浏览器地址栏留下动态时间戳参数，如果对URL规范有严格要求，可以选择下一种方案

方法2：抽离数据拉取逻辑，监听路由变化手动触发 #

在首页pages/index.vue中，把原asyncData里的数据拉取逻辑抽成公共方法，通过Nuxt提供的watchRoute钩子监听路由变化，确认跳转回首页路径时手动执行数据拉取：

<script>
export default {
  // 首次页面加载时的asyncData逻辑
  async asyncData({ $axios }) {
    const homeData = await this.fetchHomeData($axios)
    return { homeData }
  },
  // 监听路由变化
  watchRoute(to) {
    // 匹配到首页路径时重新拉取数据
    if (to.path === '/') {
      this.homeData = await this.fetchHomeData(this.$axios)
    }
  },
  methods: {
    // 抽离公共的数据拉取逻辑，避免代码重复
    async fetchHomeData($http) {
      return await $http.get('/api/home/info')
    }
  }
}
</script>

• 优点：URL不会出现额外的动态参数，数据更新逻辑和原实现完全一致

方法3：点击头部链接时主动触发页面刷新 #

修改头部图片的跳转逻辑，在点击时拦截默认跳转行为，跳转完成后调用Nuxt提供的$nuxt.refresh()方法，强制重新执行当前页面的asyncData逻辑：

<div class="w-100">
  <div @click="goHome">
    <v-img
      max-height="24"
      src="/nuxt_static/images/rectangle.png"
      :contain="true"
    ></v-img>
  </div>
</div>

<script>
export default {
  methods: {
    async goHome() {
      // 如果当前已经在首页，不需要重复跳转
      if (this.$route.path === '/') return
      // 路由跳转到首页
      await this.$router.push('/')
      // 强制重新执行首页的asyncData逻辑拉取数据
      this.$nuxt.refresh()
    }
  }
}
</script>

• 优点：不需要修改首页的原有逻辑，改动集中在全局头部组件

如果用了上述方法还是不生效，可以检查两个常见的配置坑：

• 检查全局布局里的nuxt组件，是不是错误配置了keep-alive属性把首页组件缓存了
• 确认首页路径的路由配置有没有和其他动态路由（比如pages/[slug].vue）发生路径匹配冲突

不推荐用硬跳转window.location.href = '/'实现回跳，这种方式会触发全页面刷新，大幅降低单页应用的交互体验

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