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

Question

我正在使用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
  .
  .
  .

但是，我希望路由器不会弄得一团糟，我非常希望这些路由保持原样。

这有可能吗？

Answer 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，但实际上它做的正是我想要的。对于一些较大的项目，我可能会考虑完全覆盖路由器，但目前这还不错。

Answer 2

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

<router>
    path: /posts
</router>