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路由器附加模块 https://github.com/alibaba-aero/nuxt-router-extras/blob/dev/README.md

set

Answer 2

因此，没有插件和东西，我所做的就是在扩展路由功能中替换路由对象中的文件夹名称。

文件nuxt.config.js

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

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

对我来说，这似乎是一种hack，但实际上确实可以实现我想要的功能。对于某些较大的项目，我可能会考虑完全覆盖路由器，但是现在还可以。

对页面进行分组而不影响路由器-Nuxt.js

2 个答案: