在现代 Web 应用中，我们经常需要在不跳转页面的情况下展示某些内容，比如点击图片弹出一个模态框（Modal），但又希望这个模态框的内容可以利用 URL 分享、刷新后依然存在，甚至支持浏览器前进/后退操控。Next.js 13+ 的 App Router 提供了一个强大的功能 ——拦截路由（Intercepting Routes），完美解决这类需求。
本文将深入浅出地介绍拦截路由的概念、使用场景，并提供可直接运行的代码示例。
一、什么是拦截路由（Intercepting Routes）？
拦截路由允许你在当前布局中加载另一个路由的内容，而不真正跳转到那个路由。URL 会被“伪装”成目标路径，但页面结构仍保留在当前上下文中。
核心特点：
- 软导航（Soft Navigation）：点击链接时，内容以内联方式（如 Modal）展示，URL 变化但页面不刷新。
- 硬导航（Hard Navigation）：直接访问 URL 或刷新页面时，渲染完整的目标页面。
- URL 可分享：Modal 中的内容拥有独立 URL，用户可直接分享。
- 浏览器历史兼容：支持前进/后退管理，Modal 会自动打开或关闭。
✅ 举个例子：
在/feed页面点击一张图片，URL 变为/photo/123，但页面仍显示在/feed的上下文中（比如以 Modal 形式展示照片）。
而如果你直接在浏览器输入/photo/123并回车，则会渲染完整的照片页面。
<