在不影响路由器的情况下分组页面 - Nuxt.js答案

【问题标题】：Group pages without affecting the router - Nuxt.js在不影响路由器的情况下分组页面 - Nuxt.js
【发布时间】：2019-02-03 20:01:10
【问题描述】：

我正在使用 Nuxt 创建我的应用程序，并且我有一组以某种方式相关的页面。

所以我会稍微简化一下，但我目前的结构是这样的

/pages
  /login
  /registration
  /forgot-password
  /resend-confirmation-email
  .
  .
  .

这个文件夹结构正在创建/login、/registration、/forgot-password、/resend-confirmation-email 路由，这很酷。

所以，在某种程度上，我可以将前四页归为一个组，并将其命名为 authorization。

理想的新文件夹结构应该是这样的

/pages
   /authorization
     /login
     /registration
     /forgot-password
     /resend-confirmation-email
  .
  .
  .

但是，我希望路由器不要搞砸，我非常希望这些路由保持原样。

这可能吗？

【问题讨论】：

alias 和 redirect 选项呢？ alias 更适合这里 - router.vuejs.org/guide/essentials/…
嗯，不知道这对我有什么帮助......如果我直接使用 vue-router，我会知道如何做到这一点。但是 nuxt 正在根据目录结构创建路由器文件，我想覆盖它....

标签： vuejs2 nuxt.js

【解决方案1】：

所以在没有插件和其他东西的情况下，我所做的是在扩展路由函数中替换路由对象的文件夹名称。

文件nuxt.config.js

router: {
    extendRoutes(nuxtRoutes) {
      nuxtRoutes.map(route => {
        route.path = route.path.replace('/authorization', '');
        route.name = route.name.replace('authorization-', '');

        return route;
      });
    },
    ....
}

这对我来说看起来像是一个 hack，但它实际上正是我想要的。对于一些较大的项目，我可能会考虑完全覆盖路由器，但现在还可以。

【讨论】：

【解决方案2】：

您可以使用 nuxt 路由器附加模块 https://github.com/alibaba-aero/nuxt-router-extras/blob/dev/README.md

<router>
    path: /posts
</router>

【讨论】：

我会试试这个。我也在使用 nuxt-i18n 模块来翻译我的路线名称（为了 SEO），所以我会看看它是如何配合它的。..