我想构建一个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)
任何帮助将不胜感激。非常感谢。
最佳问候
这是由null
方法返回undefined
或routes
引起的,的确如此。您的代码有2个问题:
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 }))
}