Nuxt js中使用Firebase生成动态路由失败

Question

我想构建一个 Nuxt.js 应用程序，在这种情况下，我使用的是通过 config 生成的动态路由。

好吧，我在尝试使用 Nuxt 和 Firebase 生成网页时遇到了问题。 这是我的 Nuxt Config JS 代码：

import * as firebase from 'firebase';

import 'firebase/auth';
import 'firebase/database';

var firebaseConfig = {
  apiKey: "AIzaSyAOX6yNHPzWHWd30GnDagwlhgGv9iP8kLs",
  authDomain: "musthofa-lapor.firebaseapp.com",
  databaseURL: "https://musthofa-lapor.firebaseio.com",
  projectId: "musthofa-lapor",
  storageBucket: "musthofa-lapor.appspot.com",
  messagingSenderId: "653288691711",
  appId: "1:653288691711:web:e49daf72720bf99dc5f9ca",
  measurementId: "G-0KW7CGZHL3"
};

var app = firebase.initializeApp(firebaseConfig);
var dbx = app.database();


export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ],
    script:[
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js' },
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js' },
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js' },
      { src:'https://www.gstatic.com/firebasejs/7.2.3/firebase-storage.js' },
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  generate:{
    routes(){
      return dbx.ref('aspirasi').once("value",function(snap){
        snap.forEach(function(snapshot){
          var this_val = snapshot.val();
          return  {
            route: '/admin/balas/' + this_val.id
          }
        })
      })
    }
  }
}

它产生如下错误：

ERROR   undefined                                                                    06:38:45

TypeError: Cannot read property '_normalized' of undefined
    at normalizeLocation (/Volumes/DAKSA-HDD/PROJECTS/PRANANDA/MUSTHOFA LAPOR RAKYAT/PROJECTS/WEBSITE/MAIN/musthofa-web/node_modules/vue-router/dist/vue-router.common.js:1297:12)
    at VueRouter.resolve (/Volumes/DAKSA-HDD/PROJECTS/PRANANDA/MUSTHOFA LAPOR RAKYAT/PROJECTS/WEBSITE/MAIN/musthofa-web/node_modules/vue-router/dist/vue-router.common.js:2627:18)
    at st (server.js:1:31205)
    at async e.default (server.js:1:32623)

任何帮助将不胜感激。非常感谢。

最好的问候

Answer 1

这是由于从 routes 方法返回 null 或 undefined 引起的，实际上就是这样。您的代码有 2 个问题：

1. 您没有从回调函数返回值。
2. 在 forEach 中使用 return 不会将值返回给调用者。 forEach 的返回类型为 undefined，因此您应该改用 map。

routes(){
      return dbx.ref('aspirasi').once("value",function(snap){
        return snap.map(function(snapshot){
          var this_val = snapshot.val();
          return  {
            route: '/admin/balas/' + this_val.id
          }
        })
      })
    }

奖励：您的代码可以通过使用 ES6 语法和 async/await 进行大量清理：

async routes() {
    const snapshot = await dbx.ref("aspirasi").once("value")
    return snapshot.map(snap => ({ route: "/admin/balas/" + snap.val().id }))
}