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

Question

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

但是当我转到问题路线时，当路线与数据库中保存的 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/

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

Reload page says that the page does not exist netlify

firebase

vue.js

netlify