重新加载页面说该页面不存在 netlify

Question

我有一个网站，其中包含一种博客页面，人们可以在其中发布问题，其他人可以对其发表评论。

但是当我转到问题路由时，当路由与数据库中保存的 slug 相同时，它会从 firebase 获取数据（这不是一个非常好的方法）。数据会显示在浏览器上，但如果您重新加载页面，netlify 会出现一个主要问题，提示找不到该页面。

我正在从 mounted() 生命周期加载数据，最好在 asyncdata() 上执行此操作

这是我的代码：

mounted() {
        self = this;
        const issues = firebase.database().ref('Issues/')
        issues.once('value', function(snapshot){ 
            snapshot.forEach(function(childSnapshot) {
                const data = childSnapshot.exportVal()
                if(self.$nuxt.$route.path == "/Issues/"+data.Slug || self.$nuxt.$route.path ==  "/issues/"+data.Slug ) {
                    self.allIssuetitels.push(data.Titel)
                    self.allIssueonderwerpen.push(data.Onderwerp)
                    self.allteksten.push(data.Tekst)
                    self.user = data.User
                    self.profielfoto = data.Profielfoto
                    self.Slug = data.Slug
                }
            })
        })
        const reacties = firebase.database().ref('/Reacties')
        reacties.once('value', function(snapshot) {
            snapshot.forEach(function(childSnapshot) {
                const data = childSnapshot.exportVal()
                if(self.$nuxt.$route.path == '/Issues/'+data.Slug || self.$nuxt.$route.path == '/issues/'+data.Slug) {
                    self.reaprofielfoto.push(data.Profielfoto)
                    self.reauser.push(data.User)
                    self.allreacties.push(data.Reactie)
                }
            })
        })
    },

当我在本地测试它时，它不会给我找不到页面错误。有没有办法解决这个问题？

以下是它不起作用的地方： https://angry-lalande-a5e5eb.netlify.app/issues/3

Answer 1

对于这样的事情，您可以让用户创建新页面并拥有大量经常更新的用户生成内容，您最好研究一下服务器端渲染。

https://vuejs.org/v2/guide/ssr.html

我建议，如果你想这样做，你应该迁移到 Nuxt，因为它使这样的事情变得更容易。

但是，使用 SSR 有很多注意事项 - 特别是您需要运行和管理服务器。

如果您不想查看 SSR，可以使用动态路由 as shown here

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/issue/:id', component: Issue }
  ]
})

然后，您可以让Issue 组件在获取内容时显示骨架加载器或其他加载指示器。

https://vuetifyjs.com/en/components/skeleton-loaders/