布局路由

布局路由允许你使用布局组件包裹一组页面，实现公共的页面结构（如导航栏、侧边栏、页脚等）。在文件路由中，通过 _layout 文件实现布局功能。

_layout 文件

在页面目录下创建 _layout.tsx 文件，该文件会作为同目录下所有页面的布局组件：

text

src/pages/admin/
├── _layout.tsx      ← 布局组件
├── index.tsx        → /admin
├── users.tsx        → /admin/users
└── posts.tsx        → /admin/posts

布局组件必须包含 <RouterView /> 来渲染子路由内容：

tsx

// src/pages/admin/_layout.tsx
import { RouterView, RouterLink } from 'vitarx-router'

export default function AdminLayout() {
  return (
    <div style={{ display: 'flex' }}>
      <aside>
        <nav>
          <RouterLink to="/admin">仪表盘</RouterLink>
          <RouterLink to="/admin/users">用户管理</RouterLink>
          <RouterLink to="/admin/posts">文章管理</RouterLink>
        </nav>
      </aside>
      <main>
        <RouterView />
      </main>
    </div>
  )
}

admin/ 目录下的其他文件会自动成为布局的子路由，生成的路由结构如下：

{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: '/admin', component: AdminIndex },
    { path: '/admin/users', component: AdminUsers },
    { path: '/admin/posts', component: AdminPosts }
  ]
}

嵌套布局

布局支持多级嵌套，每级目录都可以有自己的 _layout 文件：

text

src/pages/
├── _layout.tsx              ← 根布局
├── index.tsx                → /
├── about.tsx                → /about
└── admin/
    ├── _layout.tsx          ← admin 布局
    ├── index.tsx            → /admin
    └── settings/
        ├── _layout.tsx      ← settings 布局
        └── index.tsx        → /admin/settings

渲染层级为：根布局 → admin 布局 → settings 布局 → 页面内容。

每一级布局都需要包含 <RouterView /> 来渲染下一级内容：

tsx

// src/pages/_layout.tsx — 根布局
import { RouterView } from 'vitarx-router'

export default function RootLayout() {
  return (
    <div>
      <header>全局导航栏</header>
      <RouterView />
      <footer>全局页脚</footer>
    </div>
  )
}

tsx

// src/pages/admin/_layout.tsx — admin 布局
import { RouterView } from 'vitarx-router'

export default function AdminLayout() {
  return (
    <div style={{ display: 'flex' }}>
      <aside>侧边栏</aside>
      <main>
        <RouterView />
      </main>
    </div>
  )
}

自定义布局文件名

默认的布局文件名为 _layout，你可以通过 layoutFileName 选项修改：

// vite.config.ts
VitarxRouter({
  layoutFileName: '__layout' // 使用 __layout.tsx 作为布局文件
})

完整示例

text

src/pages/
├── _layout.tsx
├── index.tsx
├── about.tsx
├── contact.tsx
└── admin/
    ├── _layout.tsx
    ├── index.tsx
    ├── users.tsx
    └── posts.tsx

tsx

// src/pages/admin/_layout.tsx
import { RouterView, RouterLink, useRoute } from 'vitarx-router'

export default function AdminLayout() {
  const route = useRoute()

  const menuItems = [
    { path: '/admin', name: '仪表盘' },
    { path: '/admin/users', name: '用户管理' },
    { path: '/admin/posts', name: '文章管理' }
  ]

  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <aside>
        <nav>
          {menuItems.map(item => (
            <RouterLink
              key={item.path}
              to={item.path}
              style={{
                color: route.path === item.path ? '#fff' : '#999'
              }}
            >
              {item.name}
            </RouterLink>
          ))}
        </nav>
      </aside>
      <main>
        <RouterView />
      </main>
    </div>
  )
}