Question

有人知道为什么用户重新加载页面时子页面会崩溃吗？当您使用另一个页面的nuxt-link（使用路由参数）导航到该页面时很好，但是当用户重新加载/刷新页面时，它将崩溃。

这是我的沙箱，您可以在其中进行测试：Codesandbox

nuxt链接中的代码：

<nuxt-link :to="{name: 'photos-id-title', params: { id: photo.id, title: photo.title }}">

照片详细信息页面上的代码：

<template>
  <section>
    <!-- <template v-if="photo"> -->
    <img
      :id="photo.filename"
      :src="photo.url"
      class="img-fluid thumbnail rounded"
      :alt="photo.title"
    />
    <h1 class="h3">{{ photo.title }}</h1>
  </section>
</template>

<script>
import { Annotorious } from '@recogito/annotorious'
export default {
  data() {
    return {
      photo: {},
      anno: {},
      title: this.$route.params.title
    }
  },
  async mounted() {
    await this.getPhotoDoc()
    this.anno = await new Annotorious({ image: this.photo.filename })
  },
  methods: {
    async getPhotoDoc() {
      const docRef = await this.$fireStore
        .collection('photos')
        .doc(this.$route.params.id)
        .get()
      try {
        if (docRef.exists) {
          // data() returns all data about the doc
          console.log('got the doc: ', docRef.data())
          this.photo = docRef.data()
        } else {
          console.log('no docs exist')
        }
      } catch (error) {
        console.log('Error getting document:', error)
      }
    }
  },
  head() {
    return {
      title: this.photo.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.photo.description
        }
      ]
    }
  }
}
</script>

用户旅程：点击导航栏中的照片，然后选择页面上的任意照片。您将看到一个“照片细节”页面。加载良好。尝试刷新页面-它会崩溃。

注意：我在使用Vue-cli的普通/普通vue应用中也安装了此支架，没有任何问题。 Nuxt似乎只是一个问题。必须与SSR相关吗？

感谢您的帮助...

Answer 1

如果您认为这与SSR相关，并且Annotorious插件可能会导致问题，请尝试以下操作：

nuxt.config.js将插件添加为client模式

plugins: [
    { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  ]

您可以在nuxtjs文档here

中找到更多信息。

Nuxt：页面重新加载时崩溃

1 个答案: