页面与路由 #

src/pages/
├── index.astro        → /
├── about.astro        → /about
├── contact.astro      → /contact
└── blog/
    ├── index.astro    → /blog
    └── post.astro     → /blog/post

src/pages/
├── index.astro        → /
├── about.astro        → /about
├── services.astro     → /services
└── contact.astro      → /contact

src/pages/
├── blog/
│   ├── index.astro    → /blog
│   ├── latest.astro   → /blog/latest
│   └── popular.astro  → /blog/popular
├── docs/
│   ├── index.astro    → /docs
│   ├── intro.astro    → /docs/intro
│   └── guide.astro    → /docs/guide
└── products/
    ├── index.astro    → /products
    └── list.astro     → /products/list

---
// src/pages/about.astro
import Layout from '../layouts/Layout.astro';
---

<Layout title="关于我们">
  <h1>关于我们</h1>
  <p>这是关于页面的内容。</p>
</Layout>

src/pages/
├── blog/
│   └── [slug].astro   → /blog/:slug
└── users/
    └── [id].astro     → /users/:id

---
// src/pages/blog/[slug].astro
import Layout from '../../layouts/Layout.astro';

// 获取动态参数
const { slug } = Astro.params;

// 根据 slug 获取文章数据
const post = await getPost(slug);

if (!post) {
  return Astro.redirect('/404');
}
---

<Layout title={post.title}>
  <article>
    <h1>{post.title}</h1>
    <p>{post.content}</p>
  </article>
</Layout>

---
// src/pages/blog/[category]/[slug].astro

const { category, slug } = Astro.params;

// URL: /blog/tech/hello-world
// category = 'tech'
// slug = 'hello-world'
---

<h1>分类: {category}</h1>
<h2>文章: {slug}</h2>

---
// src/pages/docs/[...path].astro

const { path } = Astro.params;

// URL: /docs/guide/getting-started
// path = 'guide/getting-started'
---

<h1>文档路径: {path}</h1>

---
// src/pages/blog/[slug].astro

export async function getStaticPaths() {
  const posts = await getAllPosts();
  
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---

<article>
  <h1>{post.title}</h1>
  <p>{post.content}</p>
</article>

---
// src/pages/products/[id].astro

export async function getStaticPaths() {
  const products = await getProducts();
  
  return products.map(product => ({
    params: { id: product.id.toString() },
    props: { 
      product,
      relatedProducts: await getRelatedProducts(product.id)
    },
  }));
}

interface Props {
  product: Product;
  relatedProducts: Product[];
}

const { product, relatedProducts } = Astro.props;
---

<div>
  <h1>{product.name}</h1>
  <p>价格: ${product.price}</p>
  
  <h2>相关产品</h2>
  {relatedProducts.map(p => (
    <div>{p.name}</div>
  ))}
</div>

---
// src/pages/blog/[year]/[month]/[slug].astro

export async function getStaticPaths() {
  const posts = await getAllPosts();
  
  return posts.map(post => ({
    params: {
      year: post.date.getFullYear().toString(),
      month: (post.date.getMonth() + 1).toString(),
      slug: post.slug,
    },
    props: { post },
  }));
}

const { year, month, slug } = Astro.params;
const { post } = Astro.props;
---

<article>
  <h1>{post.title}</h1>
  <p>发布于 {year}年{month}月</p>
</article>

---
// src/pages/docs/[...path].astro

export async function getStaticPaths() {
  return [
    { params: { path: 'intro' } },
    { params: { path: 'guide/getting-started' } },
    { params: { path: 'guide/advanced/config' } },
    { params: { path: 'api/reference' } },
  ];
}

const { path } = Astro.params;
---

<h1>文档: {path}</h1>

---
// src/pages/blog/[page].astro

export async function getStaticPaths({ paginate }) {
  const posts = await getAllPosts();
  
  return paginate(posts, { pageSize: 10 });
}

const { page } = Astro.props;
---

<div>
  {page.data.map(post => (
    <article>
      <h2>{post.title}</h2>
    </article>
  ))}
  
  <nav>
    {page.url.prev && <a href={page.url.prev}>上一页</a>}
    <span>第 {page.currentPage} 页</span>
    {page.url.next && <a href={page.url.next}>下一页</a>}
  </nav>
</div>

interface Page {
  data: any[];           // 当前页数据
  currentPage: number;   // 当前页码
  lastPage: number;      // 最后一页
  url: {
    current: string;     // 当前页 URL
    prev: string | undefined;  // 上一页 URL
    next: string | undefined;  // 下一页 URL
  };
  total: number;         // 总数据量
}

---
// src/pages/blog/[page].astro
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths({ paginate }) {
  const posts = await getAllPosts();
  
  return paginate(posts, { 
    pageSize: 6,
    paramName: 'page'
  });
}

const { page } = Astro.props;
---

<Layout title={`博客 - 第 ${page.currentPage} 页`}>
  <div class="posts">
    {page.data.map(post => (
      <article class="post">
        <h2>{post.title}</h2>
        <p>{post.excerpt}</p>
      </article>
    ))}
  </div>
  
  <nav class="pagination">
    {page.url.prev && (
      <a href={page.url.prev} class="prev">← 上一页</a>
    )}
    
    <span class="page-info">
      第 {page.currentPage} / {page.lastPage} 页
    </span>
    
    {page.url.next && (
      <a href={page.url.next} class="next">下一页 →</a>
    )}
  </nav>
</Layout>

<style>
  .posts {
    display: grid;
    gap: 2rem;
  }

  .pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
  }
</style>

---
// src/pages/old-page.astro

return Astro.redirect('/new-page');
---

---
// src/pages/admin.astro

const user = Astro.locals.user;

if (!user) {
  return Astro.redirect('/login');
}
---

<h1>管理面板</h1>

import { defineConfig } from 'astro/config';

export default defineConfig({
  redirects: {
    '/old-blog': '/blog',
    '/old-blog/[slug]': '/blog/[slug]',
  },
});

---
// src/pages/404.astro
import Layout from '../layouts/Layout.astro';
---

<Layout title="页面未找到">
  <div class="not-found">
    <h1>404</h1>
    <p>抱歉，您访问的页面不存在。</p>
    <a href="/">返回首页</a>
  </div>
</Layout>

<style>
  .not-found {
    text-align: center;
    padding: 4rem 2rem;
  }

  h1 {
    font-size: 6rem;
    color: #dc2626;
  }
</style>

优先级从高到低：

1. 静态路由
   /about.astro

2. 动态路由
   /blog/[slug].astro

3. 剩余参数路由
   /docs/[...path].astro

src/pages/
├── blog/
│   ├── index.astro      → /blog (静态，优先级最高)
│   ├── [slug].astro     → /blog/:slug (动态)
│   └── [...path].astro  → /blog/* (剩余参数，优先级最低)

---
// 任何页面或组件

// 当前 URL
const url = Astro.url;

// 路径名
const pathname = url.pathname;

// 查询参数
const searchParams = url.searchParams;

// 完整 URL
const href = url.href;
---

<p>当前路径: {pathname}</p>
<p>查询参数: {searchParams.toString()}</p>

---
// src/components/Navigation.astro

const currentPath = Astro.url.pathname;
const navItems = [
  { label: '首页', href: '/' },
  { label: '博客', href: '/blog' },
  { label: '关于', href: '/about' },
];
---

<nav>
  {navItems.map(item => (
    <a 
      href={item.href}
      class={currentPath === item.href ? 'active' : ''}
    >
      {item.label}
    </a>
  ))}
</nav>

推荐结构：
src/pages/
├── index.astro
├── about.astro
├── blog/
│   ├── index.astro
│   ├── [page].astro
│   └── [slug].astro
├── docs/
│   └── [...path].astro
└── 404.astro

✅ 好的命名：
├── [slug].astro      # 语义化参数名
├── [id].astro        # 简洁明了
├── [page].astro      # 分页参数

❌ 不好的命名：
├── [param].astro     # 不明确
├── [x].astro         # 无意义

┌─────────────────────────────────────────────────────┐
│                 路由核心要点                         │
├─────────────────────────────────────────────────────┤
│                                                     │
│  📁 文件路由   文件路径即 URL 路径                   │
│                                                     │
│  📄 静态路由   固定路径的页面                        │
│                                                     │
│  🔄 动态路由   [参数] 匹配动态路径                   │
│                                                     │
│  📄 静态生成   getStaticPaths 预定义路径            │
│                                                     │
│  📖 分页       paginate 函数处理分页                │
│                                                     │
│  🔀 重定向     redirect 方法跳转                    │
│                                                     │
└─────────────────────────────────────────────────────┘