Nuxt.js 路由配置完全指南：从基础到高级应用

Nuxt.js 路由配置完全指南：从基础到高级应用

【免费下载链接】website-v2 Nuxt 2 Documentation Website 项目地址: https://gitcode.com/gh_mirrors/we/website-v2

前言

在Nuxt.js项目中，路由系统是整个应用的核心骨架，它决定了用户如何访问和导航到不同的页面。本文将全面解析Nuxt.js的路由配置选项，帮助开发者掌握从基础路由设置到高级定制技巧。

基础路由配置

应用基础路径(base)

base属性用于设置应用的根URL路径。当你的Nuxt应用部署在子目录而非根目录时，这个配置尤为重要。

export default {
  router: {
    base: '/my-app/'
  }
}

技术细节：

• 设置后，所有路由都会以/my-app/为前缀
• Nuxt会自动在HTML头部添加<base href="/my-app/">标签
• 适用于微前端架构或大型网站中的子应用场景

路由名称分隔符(routeNameSplitter)

默认情况下，Nuxt使用连字符(-)连接路由名称。例如pages/posts/_id.vue会生成posts-id路由名。

export default {
  router: {
    routeNameSplitter: '/'
  }
}

修改效果：

• 上述例子中的路由名会变为posts/id
• 更符合RESTful风格的URL命名习惯

高级路由定制

扩展路由(extendRoutes)

当需要添加自定义路由或修改默认路由时，可以使用extendRoutes函数。

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/custom',
        component: resolve(__dirname, 'pages/custom.vue')
      })
    }
  }
}

最佳实践：

• 适合添加404页面等特殊路由
• 可以结合@nuxt/utils的sortRoutes方法对路由进行排序
• 命名视图路由需要额外配置chunkNames

路由中间件(middleware)

全局中间件会在每个页面切换时执行，非常适合处理全局逻辑。

// nuxt.config.js
export default {
  router: {
    middleware: 'auth'
  }
}

// middleware/auth.js
export default function({ store, redirect }) {
  if (!store.state.auth) {
    return redirect('/login')
  }
}

使用场景：

• 用户认证检查
• 权限控制
• 全局数据预取

路由行为控制

滚动行为(scrollBehavior)

自定义页面切换时的滚动位置行为。

// app/router.scrollBehavior.js
export default function(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { x: 0, y: 0 }
}

常见配置：

• 返回顶部
• 记住滚动位置
• 锚点滚动

链接预取(prefetchLinks)

Nuxt默认会预取视口中的<nuxt-link>对应的页面资源。

export default {
  router: {
    prefetchLinks: false // 全局禁用
  }
}

优化技巧：

• 对重要页面手动开启预取：<nuxt-link prefetch>
• 对非关键页面禁用预取：<nuxt-link no-prefetch>
• 需要IntersectionObserver支持（IE11需要polyfill）

特殊场景处理

尾部斜杠(trailingSlash)

控制URL是否以斜杠结尾，需要特别注意兼容性问题。

export default {
  router: {
    trailingSlash: true // 强制尾部斜杠
  }
}

注意事项：

• 设置后必须确保反向路由可用
• 需要配置301重定向
• 影响SEO，需保持一致

路由模式(mode)

虽然Nuxt默认使用history模式，但在某些特殊情况下可能需要hash模式。

export default {
  router: {
    mode: 'hash'
  }
}

限制：

• 不推荐修改，会影响SSR
• hash模式URL不够美观
• 不利于SEO

性能优化

预取负载(prefetchPayloads)

在静态生成模式下，Nuxt可以为每个页面生成payload数据。

export default {
  router: {
    prefetchPayloads: true // 自动预取视口内链接的payload
  }
}

优势：

• 实现近乎即时的页面导航
• 减少API请求
• 仅适用于静态生成的目标

结语

Nuxt.js的路由系统提供了丰富的配置选项，从基础的路径设置到高级的行为控制，开发者可以根据项目需求灵活配置。理解这些配置项的工作原理和适用场景，将帮助你构建更加强大和高效的Nuxt.js应用。

记住，路由配置不仅影响用户体验，也关系到应用的SEO和性能表现，建议在项目初期就规划好路由策略。

【免费下载链接】website-v2 Nuxt 2 Documentation Website 项目地址: https://gitcode.com/gh_mirrors/we/website-v2