Nuxt Router Base配置疑问：访问/a无法加载pages/a/index.vue

问题本质 #

这不是正常现象，是Router Base与页面路由的映射逻辑导致的：

• 当你设置router.base = '/a/'时，Nuxt会给所有页面的路由自动加上/a/前缀
• 你的pages/a/index.vue默认对应路由/a，叠加base前缀后就变成了/a/a，所以必须访问这个路径才能加载页面

解决方案 #

方案1：调整页面结构（最简单）

将pages/a/index.vue移动到pages根目录并重命名为index.vue，调整后的结构：

• pages
  • index.vue （原pages/a/index.vue）
  • b
    • index.vue
      此时/a/（base根路径）会直接匹配根目录的index.vue，访问https://localhost:3000/a即可打开目标页面。

方案2：自定义路由映射（保留原页面结构）

如果不想改动页面结构，可在nuxt.config.js中通过extendRoutes手动修改路由规则：

export default {
  router: {
    base: '/a/',
    extendRoutes(routes, resolve) {
      // 找到对应pages/a/index.vue的路由项
      const targetRoute = routes.find(route => route.path === '/a')
      if (targetRoute) {
        // 将其路径改为base下的根路径'/'
        targetRoute.path = '/'
      }
    }
  }
}

修改后重启Nuxt服务，访问https://localhost:3000/a就能直接加载pages/a/index.vue。

内容的提问来源于stack exchange，提问作者Restu