从动态路由的灰烬中重生：克服刷新时 404 的困局

前端

2023-09-19 09:07:08

在构建 Vue 后台管理系统时，赋予页面动态添加到路由的灵活性至关重要。然而，当这些动态页面在页面刷新时遭遇 404 错误，挫败感油然而生。本次旅程中，我们将揭开这个谜团，探索解决之道，让你的动态路由在刷新时无缝运行。

缘起：动态路由的迷宫

为了实现权限控制，我们为每个页面分配了一个权限代码，并将其存储在后台数据库中。在前端，页面根据返回的权限代码列表定义其路由。通过这种方式，我们可以动态地控制用户对页面的访问权限。

刷新中的困境：404 的阴影

一切似乎都很顺利，直到我们点击了刷新按钮。动态添加的路由页面突然消失了，取而代之的是令人失望的 404 错误。仿佛这些页面只是一闪而过的幻觉，在刷新的瞬间就烟消云散。

探寻根源：问题的症结

经过一番侦查，我们发现问题根源在于 Vue 路由的默认行为。当页面刷新时，Vue 路由会重新加载整个应用程序，这会导致动态添加的路由被遗忘，从而触发 404 错误。

解决之道：向历史俯首

解决问题的关键在于利用 Vue 路由的历史记录 API。通过保存路由历史记录，我们可以确保在刷新页面时动态添加的路由仍然存在。以下是如何实现的：

使用 history.pushState 保存路由历史记录： 在动态添加路由时，使用 history.pushState 将新路由添加到历史记录堆栈。
覆盖 beforeunload 事件： 在离开页面之前，使用 beforeunload 事件监听器阻止页面刷新。
在 beforeunload 事件中检查路由历史记录： 如果在刷新前检测到动态路由，则从历史记录堆栈中删除该路由。

代码示例：拨云见日

// 动态添加路由
router.addRoute({ ... });

// 覆盖 beforeunload 事件
window.addEventListener('beforeunload', (event) => {
  if (router.hasRoute(dynamicRouteName)) {
    router.removeRoute(dynamicRouteName);
  }
});