路由

路由

路由系统说明

路由配置文件

• 主应用路由位置：web/app/pages/routes.ts

• 插件路由位置：addon/插件/pages/routes.ts

路由配置结构

{
  path: string,           // 路由路径
  component: () => import('path/to/component.vue'),  // 组件路径
  meta: {
    layout?: string,      // 布局名称
    middleware?: string[] // 中间件列表
  }
}

路由使用

布局

• 默认布局：layouts/default.vue（含导航栏、侧边栏）

• 容器布局：layouts/container.vue（简洁布局，用于登录等页面）

中间件

• auth：认证中间件，保护会员中心页面

• lang-load.global：全局语言加载中间件

跳转方式

<!-- Nuxt Link组件 -->
<NuxtLink to="/auth/login">登录</NuxtLink>
<NuxtLink :to="{ path: '/article/detail', query: { id: 123 } }">文章详情</NuxtLink>

// UseRouter组合式函数
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 跳转路由
router.push('/auth/login')
router.push({ path: '/article/detail', query: { id: 123 } })

// 获取参数
const articleId = route.query.id