Skip to content

04 路由与页面 ​

4.1 文件系统路由 ​

Nuxt 根据 app/pages/ 自动生成路由。动态参数使用方括号命名,例如:

  • products/[id].vue:商品详情。
  • shop/[id].vue:店铺详情。
  • collections/[id].vue:商品集合。
  • custom/[id].vue:自定义页面。
  • account/orders/[id].vue:订单详情。
  • account/aftersales/[id].vue:售后详情。

页面文件应保持路由职责清晰,复杂业务拆到组件、composable 或 Store。

4.2 页面业务域 ​

  • 商城入口:index.vue、custom/[id].vue。
  • 商品与店铺:products/[id].vue、shop/[id].vue、collections/[id].vue。
  • 交易链路:cart/index.vue、checkout/index.vue、payment/index.vue。
  • 账户中心:登录、注册、找回密码、地址、优惠券、收藏、关注店铺、评价。
  • 订单与售后:订单列表、订单详情、售后列表和售后详情。
  • 扩展能力:ai-assistant.vue、protocol.vue。

4.3 登录保护 ​

middleware/auth.global.ts 是全局中间件。它先通过 stripLocalePrefix() 去掉语言前缀,再判断路径是否以受保护前缀开头:

text
/member
/cart
/order
/account/profile

未登录时跳转到本地化登录页,并通过 redirect 查询参数保留原始地址。

页面内需要保护单个操作时,使用 useAuthGuard() 的 requireAuth()、checkAuth() 或 guardRoute(),不要在每个组件重复实现登录判断。

4.4 页面初始化 ​

需要额外初始化的页面可以显式使用命名中间件 init。该中间件调用 useApp().initializeApp(),适合页面级预加载,但不应替代全局插件初始化。