NuxtJS 路由错误:导航到现有路由时找不到页面



刚开始使用Nuxt,到目前为止我很喜欢它。我只有一个特定的问题,我正在使用 prismic.io 作为我的个人页面的无头CMS。我有几个页面和一个"博客"页面。我在导航到博客路由时遇到问题,它返回未找到页面。现在,这有点奇怪,因为它在我的本地主机中运行良好,部署时就是这样。

站点正在 Netlify 上部署。

我已经尝试切换路线的链接并在我的本地机器上构建项目,它就像魅力一样工作。

网站链接:https://wonderful-gates-27a024.netlify.com/

这是我的页面文件结构:

Pages/
-- blog/
---- _uid.vue
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue

复制问题的步骤

  • 导航到关于
  • 导航到联系人
  • 导航到博客(有时此步骤会显示错误)
  • 点击文章
  • 导航回博客(此处应显示未找到)

出现错误后导航回博客的步骤:

  • 在网址栏上,粘贴 wonderful-gates-27a024.netlify.com/blog 并按回车键。

我收到找不到页面错误

它有时有效,因为您正在导航到

https://wonderful-gates-27a024.netlify.com/blog/

这与

https://wonderful-gates-27a024.netlify.com/blog

正在/blog的页面

https://wonderful-gates-27a024.netlify.com/blog

在页面时不存在

https://wonderful-gates-27a024.netlify.com/blog/

存在。 这是/blog/_uid

所以如果你想让它工作,使

Pages/
-- blog/
---- _uid.vue
---- index.vue// make this file and the /blog will work
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue

我们刚刚发生了此错误,这是由于在MacOS计算机上将About.vue重命名为about.vue引起的。

Git 无法将其识别为新文件,因此在 Linux 计算机上部署应用时,会出现此问题。

解决方案是从 Linux 机器重命名文件,以便 git 识别它。

您也可以通过将文件从Blog.vue重命名为new-blog.vue然后再次重命名为blog.vue来完成它。

这都是由于文件在MacOS上不区分大小写,但在Linux上却不区分大小写。您将在以下位置看到它:

<NuxtLink :to="{ name: 'blog' }">

它必须是 blog.vue 才能匹配路由名称,因为文件名会导致路由名称。在 Linux 上,如果路由Blog.vue,爬虫会将路由命名为"Blog"

您不希望使用带有nuxt的大写文件名,因为它们会导致诸如/Blog之类的URL。我不建议在您的页面目录中使用大写字母。

我们现在已经发布了更新的nuxt-prismic模块,以解决此动态路由问题并启用预览。请按照以下文章了解如何迁移项目: https://prismic.io/docs/vuejs/getting-started/the-new-prismic-nuxt-module

您还可以在此处看到已启用该模块的项目: https://user-guides.prismic.io/en/articles/2831943-nuxt-js-sample-multi-page-website-with-navigation

最新更新