如何在不使用router.js的情况下在nuxt中添加大写的页面名称？答案

【问题标题】：How to add page names in uppercase in nuxt without using router.js?如何在不使用router.js的情况下在nuxt中添加大写的页面名称？
【发布时间】：2021-01-08 14:06:05
【问题描述】：

我无法将页面名称设为 Index.vue，但对于我所做的其他页面，它可以正常工作。

知道如何解决这个问题吗？

PS：对于这个项目，我更喜欢 PascalCase 的页面。我不想手动配置 router.js。

【问题讨论】：

您有任何错误/警告吗？
我在控制台中没有收到任何错误，但是当我尝试加载 localhost:3000 时，它没有使用 Index.vue 模板，而是收到 404 错误。
你真的需要它吗？我的意思是index.vue 是路线/？
@Ifaruki 是的，确实
我真的不明白你从使用 Pascal 命名你的页面文件中得到什么。建议只在组件中（名称，而不是文件）

标签： vue.js vuejs2 nuxt.js nuxtjs

【解决方案1】：

由于 Nuxt.js 会根据你的 /pages 结构自动创建 vue-router，如果你真的需要 /Index 路由，你可以创建一个名为“Index”的文件夹，然后在其中包含你的 index.vue 模板.

然后你就可以从 nuxt-link 调用 /Index 路由了：

<nuxt-link to="/Index">Click Me</nuxt-link>

【讨论】：

【解决方案2】：

在该目录下创建 index.vue 文件后，先创建一个你想要的名字的目录

【讨论】：

听起来不错，但它不适用于主页，对吧？例如。如果我们添加一个文件夹，那么 URL 将是 localhost:3000/Index
否，如果您创建一个具有所需名称的文件夹并在文件夹中创建 index.vue 文件，您的路线更改为文件夹名称，例如您创建了一个名为“test”的文件夹并在此文件夹中创建index.vue 文件。最终你有这条路线：localhost:3000/test

【解决方案3】：

我认为像这个问题一样，你可以让 nuxt 在路由中区分大小写

How to make routes case sensitive in Nuxt

通过添加此代码：

// nuxt.config.js
router: {
  extendRoutes(routes) {
    for (const key in routes) {
      routes[key].caseSensitive = true
    }
  }
}

【讨论】：