NuxtJS 以及如何设置默认页面布局？

Question

所以我刚开始使用 NuxtJS，到目前为止我很喜欢它。我现在正试图弄清楚如何为页面设置默认页面布局。在 NuxtJS 中，路由设置在页面文件夹中，因此，如果我想使用 slug 定位页面，例如 test.com/about。我将在名为“_slug”的页面文件夹中创建一个文件夹，并在该 _slug 文件夹中添加一个 index.vue 文件。然后在该文件中，我将为页面设置我想要的布局，在基本 URL 之后只有一个 slug。

我现在有一个页面，其 URL 类似于 test.com/about/history。我知道我可以在 pages 文件夹中添加一个名为“about”的文件夹，并在该文件夹中添加一个名为“_slug”的文件夹，其中包含一个 index.vue 文件来定位该 URL 路径。

但我想要的是对于带有 test.com/about/(slug-name-here) 的页面，使用与 page->_slug->index.vue 相同的页面布局，而无需复制代码在该文件中并在 page->about->_slug->index.vue 文件中再次使用它。

所以我想弄清楚是否有办法告诉 NuxtJS 为每个页面使用 page->_slug->index.vue，除非通过创建所需的文件夹结构在 pages 文件夹中指定它。

Answer 1

您可以通过在nuxt.config.js 文件中点击router 实例的extendedRoutes 方法来控制路由：

export default {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/_slug/index.vue')
      })
    }
  }
}

那就不要再创建页面了，每条路由都会去这个特定的vue文件。