时间戳

首页 > 解决方案 > 如何避免 Nuxt 中的页面模板重复

nuxt.js - 如何避免 Nuxt 中的页面模板重复

问题描述

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

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

如果没有像这样在页面文件夹中复制页面模板，我看不到这样做的方法

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

这会很好，因为我不能让自己打破黄金 DRY 规则。

标签： nuxt.js

解决方案

认为我自己找到了答案，所以会离开这里。我现在的页面文件夹中只有页面模板

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

推荐阅读