Astro 页面导航与链接

普通链接

Astro 模板就是 HTML，所以跳转页面直接用原生的 <a> 标签即可。

---
---
<a href="/about">关于我们</a>

构建后，Astro 会自动给站内链接做优化，比如加上预加载，让点击后切换更顺滑。

用组件封装导航

把导航写成一个组件，能避免每个页面重复写链接，新建 src/components/Nav.astro。

---
// src/components/Nav.astro
---
<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
  <a href="/blog">博客</a>
</nav>

在页面里引入使用。

---
import Nav from '../components/Nav.astro';
---
<Nav />
<main>这里是页面正文</main>

高亮当前页面

很多导航希望「当前所在页」有高亮样式，可以借助 Astro 内置的 Astro.url 判断。

---
const path = Astro.url.pathname; // 取当前访问路径，如 /about
---
<nav>
  <a href="/" class={path === '/' ? 'active' : ''}>首页</a>
  <a href="/about" class={path === '/about' ? 'active' : ''}>关于</a>
</nav>

Astro 是 Astro 在每个组件里自动提供的内置全局对象，Astro.url 是它上面的属性，表示当前网址，pathname 就是路径部分。

页面之间传递数据

静态页面之间一般通过网址参数或链接带 query 来传数据。

<a href="/search?q=astro">搜索 astro</a>

在目标页读取。

---
const keyword = Astro.url.searchParams.get('q'); // 读取网址 ?q= 后的查询参数
---
<p>你搜索的关键词是：{keyword}</p>