标签: dynamic-routing

我已经在整个互联网上搜索了我的问题的答案。到目前为止还没有运气。

我想要实现的目标：我有一个在通用模式下运行的 Nuxt 应用程序。它就像一个小型社交网络，用户可以在其中创建自己的个人资料并分享他们的工作。

因此，我正在使用动态路由（users/_id.vue）从 url 获取参数并从我的数据库（firebase）获取适当的数据。到目前为止，一切都很好。

我想用静态主机（Netlify 或 Zeit Now）托管它，并且我知道可以通过生成配置呈现动态路由。但这不是我想要的。对于这个特定的路线，我可以使用空 shell，然后异步 Javascript 访问 API 并用数据填充 shell。SEO 在这里并不重要，因为配置文件无论如何都在身份验证后面。

我需要的只是 Nuxt 生成一个“捕获所有”文件，然后呈现用户配置文件客户端（users/martha 或 users/johndoe）。Gridsome 通过从 _id.vue 文件中渲染 _id.html 来实现这一点。Nuxt 也有办法做同样的事情吗？

谢谢你在这里帮助我。

当我在 my 中nuxt generate运行时，我的动态创建的路由不接受它们的有效负载，它们的负载如下：target: "static"nuxt.config.js

****nuxt.config.js****
generate: {
    routes() {
      return axios
        .get(`${process.env.ROOT_URL}/businesses`)
        .then(res => {
          return res.data.map(business => {
            return {
              route: `/business/${business.id}`,
              payload: business
            };
          });
        });
     }
}

****business.vue****
async asyncData({ params, store, error, payload }) {
    if (payload) {
      console.log('GOT PAYLOAD!', payload);
      return { business: payload };
    } else {
      // other stuff
    }
})

nuxt generate在上面的 console.log中，每个动态路由都会被命中，所以我知道它正在接收正确的负载。

nuxt generate在我的dist文件夹为每个动态路由都有一个子文件夹之后，但index.html每个动态路由内部只有几行，当我在浏览器上访问每个动态路由的页面时，不会出现特定于动态路由的内容（我的组件中的导航栏layout显示正常） ）。

应用程序中的导航工作正常，因此，如果我转到不同的页面并进入我的动态路线内容页面，将会出现，所以asyncData有效，接受有效负载是麻烦。 …

我正在使用 Next.js 构建 LMS。到目前为止我的项目结构是localhost/courses/1。每门课程有 7 页。仪表板、作业、测试和测验、成绩册、资源、公告和花名册。我已准备好所有组件和页面。因此，如果我手动转到localhost/courses/1/assignments或localhost/courses/1323/roster等，则效果很好。

我想要做的是：当我单击作业链接时，我需要转到该特定课程的作业页面 - 类似localhost/courses/1/assignments. 目前，我已将 URL 硬编码为，/courses/1/[page]因此如果我单击指派，它将转到localhost/courses/1/assignment，或者如果我单击名册，它将转到localhost/courses/1/roster。

如何使该路线动态化，以便当用户单击课程内的某个选项卡时，会将他们带到该特定课程的该页面？

我抬起头next/link，next/router但我仍然做不到。有什么帮助吗？

编辑：这是我的文件夹结构：

就像我上面说的，现在我已经使用链接将某人发送给/courses/1/assignment例如。

如果您想查看该网站，它托管在我的应用程序中。

import Image from 'next/image';
import tools from "./sidebarData";
import SideBarItem from "./SidebarItem";

function Sidebar() {
    return (
        <div className="flex mt-8 ml-20">
            <div className="">
                <ul>
                    {Object.entries(tools).map(([key, {title, url, icon}]) => (
                        <SideBarItem key={key} title={title} Icon={icon} url={url}/>
                    ))}
                </ul>

            </div>
        </div>
    )
} …

这是我的下一个 js 项目的一部分。该网站在 localhost 上完美运行，但当我将其部署在 vercel 上时，/blogs/book/chapter 页面给出文件未找到，在此处输入图像描述 500 错误。

托管页面 -网站 源代码 - GitHub

动态路由文件夹结构

页面结构

章节.js

import fs from "fs";
import path from "path";
import Head from "next/head";
import DefaultErrorPage from "next/error";
import { useRouter } from "next/router";
import matter from "gray-matter";
import { marked } from "marked";
import styles from "../../../../styles/blog/Chapter.module.css";
import { capitalise } from "../../../../components/blog/Capitalise";
import BlogPostBottom from "../../../../components/blog/BlogPostBottom";

export default function Chapter({ book, chapter, frontmatter, content }) {
    // Destructuring
    const { description …