如何避免Nuxt中的页面模板重复？

Question

我在Nuxt中有一个通用的页面模板，我想将其用于多个根。我想让下面的URL映射到同一个模板（然后从prismic api加载它的内容）。

/:root-level-page
/products/:product

我看不出有什么办法可以做到不复制页面文件夹中的页面模板，就像这样。

pages/_page.vue
pages/products/_page.vue

这将由我不能让自己打破黄金DRY规则的工作。

Answer 1

我想我自己已经找到了答案，所以就不说了。我现在只是在我的页面文件夹里有一个页面模板

pages/_page.vue

然后我在nuxt.config.js中添加了以下内容。

router: {
extendRoutes (routes, resolve) {
  routes.push({
    name: 'section-page',
    path: '/:section/:page',
    component: resolve(__dirname, 'pages/_page.vue')
  })
}

}

这意味着下面的路线都使用相同的页面模板

/about
/products/some-product
/some-other-section/some-other-page

Answer 2

你应该使用 Nuxt布局.

喏 是来自Nuxt网站的官方例子。

你基本上创建了一个 .vue 在您的体内的SFC /layouts 目录中和您的 pages/_page.vue 和 pages/products/_page.vue 文件，你只要参考它。