小编mys*_*ore的帖子

我正在使用 nuxt 生成完整的静态 Web 应用程序，如下所述https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications

我有一个小博客也可以作为静态站点加载，因此我使用 fetch hook 从 api 加载数据。

async fetch() {
  this.posts = await fetch(`${this.baseApi}/posts`).then(res => res.json())
},

当我生成( npm run generate)时，获取的状态在内部正确生成dist/assets/static，因此当直接访问时/blog，状态被正确加载并且数据显示正确。但是，当我在主页上并使用访问博客时

this.$router.push

或一个

<nuxt-link to="/blog">Blog</nuxt-link>

获取到的状态没有加载，我必须再次调用api，或者在钩子中再调用this.$fetch()一次mounted()

我已经添加了一个

watch: {
  '$route.query': '$fetch'
}

到主页

使用导航时我需要正确加载获取的状态我还缺少什么？

澄清

我没有遇到 fetch hook 本身的任何问题，而是导航没有检索目标路由的状态。即使HTML在那里我也需要页面来获取目标路由的状态，当路由发生变化时，因为vue模板依赖于它，所以如果它没有加载，ui将不会显示任何内容，我被迫手动调用 fetch hook

为了更清晰的视图，这是我的开发工具在直接访问 /blog 时的屏幕截图，请注意如何正确检索 state.js（它包含所有渲染的内容）

以下是我的开发工具在访问 / 时的屏幕截图，然后使用 nuxt-link 或 this.$router.push 访问博客（相同的结果）

静态截图：

Blog.vue

<template>
  <b-container class="container blog">
    <b-row>
      <b-col lg="12" md="12" sm="12" cols="12" class="logo-col">
        <SbLogoSingle /> …