Nuxt 定制路由器答案

【问题标题】：Nuxt custom routerNuxt 定制路由器
【发布时间】：2020-05-23 15:49:45
【问题描述】：

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

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. 我在 /pages 目录下创建了 Slug.vue。

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

【问题讨论】：

标签： javascript vue.js nuxtjs

【解决方案1】：

两个问题：

您目前在嵌套的router 属性下拥有extendRoutes，但该属性不存在。将其移至顶层router prop：

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

  extendRoutes() {...}
}

对于非嵌套路由，路径属性必须以斜杠开头：

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

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

【讨论】：