javascript - Nuxt 定制路由器

Question

我正在尝试使用以下内容在 Nuxt 中创建自定义路由 nuxt.config.js：

router: {
    base: '/',
    router: {
      extendRoutes (routes, resolve) {
        routes.push({
          name: 'custom',
          path: 'here-i-am',
          component: resolve(__dirname, 'pages/Slug.vue')
        })
      }
    }
  },

虽然，当我访问localhost:3000/here-i-am - 它正在抛出：This page cannot be found.我已经在目录Slug.vue下创建了/pages。

我还缺少其他东西吗？我试图重新运行编译器。

Answer 1

两个问题：

1. 您当前拥有一个不存在extendRoutes的嵌套属性。router将其移动到顶级router道具：

router: {
  //router: {  // DON'T DO THIS
  //   extendRoutes() {...}
  //},

  extendRoutes() {...}
}

2. path 属性必须以非嵌套路由的前导斜杠开头：

routes.push({
  // path: 'here-i-am'  // DON'T DO THIS

  path: '/here-i-am'
})