Nuxt:页面重新加载时的页面崩溃

Question

有人知道为什么当用户重新加载页面时，子页面会崩溃吗？当您使用来自另一个页面的nuxt链接导航到页面时(使用路由参数)，这是很好的，但是当用户重新加载/刷新页面时，它就会崩溃。

这里是我的沙箱，您可以在这里测试它：码箱

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应用程序中搭建了这个脚手架，没有任何问题。似乎只是努克斯特的问题。一定是SSR相关吗？

谢谢你的帮助..。

Answer 1

如果您认为这是与SSR相关的，而Annotorious可能会导致这个问题，请尝试如下：

1. nuxt.config.js添加带有模式client的插件

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

您可以在nuxtjs docs 这里中找到更多信息。