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

时间:2019-05-31 05:18:14

标签: vue.js nuxt.js prismic.io

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

站点正在Netlify上部署。

我已经尝试过切换路线的链接并在本地计算机上构建项目,并且它的工作原理很吸引人。

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

这是我页面的文件结构:

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

复制问题的步骤

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

显示错误后导航回博客的步骤:

我收到找不到页面错误

5 个答案:

答案 0 :(得分:1)

如果您使用以下示例创建博客:https://user-guides.prismic.io/en/articles/2802125-create-a-sample-blog-with-prismic-and-nuxt

我猜这在Netlify中不起作用。 Netlify仅支持静态站点 “ Nuxt Generate”仅在“ Client side”创建静态站点,但是此Blog需要“ Server side”。(我不确定)

但是我设法使其在“ Now” Zeit.co https://nuxtjs.org/faq/now-deployment上运行。

答案 1 :(得分:1)

我们现在已经发布了更新的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

答案 2 :(得分:0)

有时可以使用,因为您导航到

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

答案 3 :(得分:0)

正如Rogério所说,问题来自Nuxt generate command as it ignores dynamic routes,即'_uid.vue',您将需要在nuxt配置文件中进行查询以创建路由。另一种选择是使用heroku或zeit。

我们正在与Nuxt一起改进插件,以便在使用“生成”命令时它将自动创建路由。线程发布后,我将对其进行更新。

答案 4 :(得分:0)

我们刚刚发生了这个错误,它是由在 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",爬虫会将路由命名为 Blog.vue

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