Question

我的Nuxt.js应用具有以下结构：

/pages/index.vue
/pages/_slug/index.vue

当用户获得/{any_page}时，它将使用该路径来构建页面内容：

/pages/_slug/index.vue

<template>
  <div>
    {{slug}}
  </div>
</template>

<script>
import fetch from 'isomorphic-fetch';
export default {
  async asyncData({ params }) {
    return { slug: params.slug } 
  }
}
</script>

当直接通过yarn dev运行Nuxt应用程序时，这非常理想。

当我尝试使用Firebase函数运行此程序时：

$ firebase serve --only functions,hosting

静态路由可以正常工作，但是动态路由始终呈现默认的/页面，而不是执行动态页面。我该如何解决？

Answer 1

如果使用<li> <span>onWarning:</span> <span id="msg_warning"></span> </li> try { // load face detection model await changeFaceDetector(MTCNN) changeInputSize(128) // try to access users webcam and stream the images // to the video element const stream = await navigator.mediaDevices.getUserMedia({ video: {} }) const videoEl = $('#inputVideo').get(0) videoEl.srcObject = stream } catch(err) { //$("#msg_error").html(`Requested device not found`); $("#msg_error").html(err.message); console.log(err.message); }，则下面的解释应该起作用。如果使用df['Age']=(np.where((df['Country'] == 'China') & (df['Age'].isnull()),df['Age'].mean() ,np.where((df['Country'] == 'USA') & (df['Age'].isnull()),df['Age'].median(),df['Age']))).round()，请查看this回购，它是我为nuxt + firebase作为ssr编写的模板。

Generate说，除非您明确指定动态路由，否则它将跳过动态路由，因此会出现404错误。您要在Nuxt配置文件中指定这些路由。这是在生成过程中从数据库获取的示例。请注意，在下面的示例中，文档ID是页面的标签。

nuxt.config.js

   Country  Age
0   USA     34.0
1   EU      15.0
2   China   35.0
3   USA     45.0
4   EU      30.0
5   China   41.0
6   USA     28.0
7   EU      26.0
8   China   78.0
9   USA     65.0
10  EU      53.0
11  China   66.0
12  USA     32.0
13  EU      NaN
14  China   14.0

此方法的缺点是，当您通过CMS添加新项目时，如果希望不使用404就可以使用这些新链接，则每次都需要重建/部署站点。您“以有机方式”导航到新内容... 404仅在刷新页面或从超链接直接跳转到页面时发生。

Firebase上的Nuxt动态路由

1 个答案: