实现切换路由时当前布局不变并加载其他路由

最近在过 Next.js 文档 ，看到拦截路由这一章，感觉到很惊讶（暂时没想到什么词可以形容了），这种设计在交互和代码上都着实可以称赞。同时联想了一下 Vue.js 如何实现。

举一个例子

路由定义

• /photo : 图片列表
• /photo/xxx : 具体某张图片的详情

在页面 /photo 单击图片时，路由发生变化，进入图片详情 /photo/123， 可以通过模态框( Modal )展示内容。（官方称这种行为拦截路由，屏蔽 URL）

此时，如果使用 /photo/123 直接进入图片详情，直接展示的是详情页面，而不是模态框。

此设计优势，参考 Next.js 官方

• 可通过URL分享
• 刷新时可保留上下文，而不是关闭 Modal
• 路由后退时关闭 Modal ，而不是真正的后退路由
• 后退后可以向前导航打开 Modal

Next.js 实现

Intercepting Routes 拦截路由主要是可以实现切换路由时，原页面布局不进行改变，同时可以加载新路由。

next.js 实现起来并不复杂，基本上官方已经提供了模板，简化了很多。

通过 Parallel Routes 平行路由来实现。

大致结构如下：

示例代码 copy 了一份，codesandbox查看。

Vue.js 实现

大致思路，在 vue router 配置中，将图片详情配置为图片列表的子路由，这样就可以实现两路由同时展示，伪代码如下。

const routes = [
  {
    // 图片列表
    path: '/photo',
    component: Photo,
    children: [
      // 图片详情
      {
        path: '/photo/:id',
        component: PhotoInfo,
      },
    ],
  },
]

在 PhotoInfo 中，我们可以根据路由历史记录来判断是 Modal 打开，还是平铺图片详情。

如此一来便实现了该功能。

总结

Next.js 实现起来有官方实践推荐，支持较好，跟随文档即可实现。

Vue.js 实现起来有点黑魔法的感觉，相关逻辑需要自行实现，不过也是可以实现类似功能，并且具备相同的特性。(小红书官网的feed流打开笔记详情效果，实现原理也类似)

• 通过路由嵌套的形式，将列表页作为父路由，详情页作为子路由，实现路由页面可以共存，并且切换时还可以保留上下文
• 需在子路由实现以什么形式加载，判断和展示逻辑都需手动实现。