当我单击 nuxt js 按钮时，会出现响应

Question

我想用 SSR 隐藏 nuxt js 项目和 post 请求的响应。

当页面首次加载时这是可能的。

    <template>
  <p v-if="$fetchState.pending">Fetching mountains...</p>
  <p v-else-if="$fetchState.error">An error occurred :(</p>
  <div v-else>
    <h1>Nuxt Mountains</h1>
    <ul>
      <li v-for="mountain of mountains">{{ mountain.title }}</li>
    </ul>
    <b-btn @click="$fetch">Refresh</b-btn>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

但是，当点击按钮时，apiler出现在浏览器网络响应中。

when the page loads

Clicking the button

Answer 1

页面加载时请求没有出现在网络选项卡中的原因是 nuxt 在服务器上运行 fetch 方法，并在加载之前将响应注入页面组件。您想要同一页面上的按钮再次获取数据，但不希望数据请求出现在网络选项卡中？

如果是这样，我认为您将不得不刷新页面。这样，fetch 方法会在页面加载之前再次运行，您的用户将不会看到请求，就像在传统的 SSR 应用程序中一样。然而，对于 Nuxt 应用程序来说，这似乎是一个不寻常的用例！

而不是：

<b-btn @click="$fetch">Refresh</b-btn>

使用：

<b-btn @click="this.$router.go()”>Refresh</b-btn>

当我单击 nuxt js 按钮时，会出现响应

When I click the nuxt js button the response appears

vue.js

server-side-rendering

nuxt.js

nuxtjs