【发布时间】：2020-10-31 00:38:11
【问题描述】：
有人知道为什么用户重新加载页面时子页面会崩溃吗？当您使用 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 相关？
感谢您的帮助...
【问题讨论】：
-
它与 SSR 有关，因为页面仅在重新加载时才会崩溃。您能给我们一些错误或修复代码框链接吗？
-
抱歉链接...不知道它是私人的。现在就试试！ codesandbox.io/s/thirsty-nash-4mwol
-
看来问题出在我正在使用的 Annotorious 插件上。在 Vue 应用程序中很好，但在 Nuxt 中没有。我没有正确加载插件吗？如果禁用该插件，一切正常。
-
小心你所有的 API 密钥都在你的代码框里
-
谢谢。我不认为这是一个问题。 Firebase 的 Google 文档说那里没有秘密。