如何实现Vue Router历史模式搭配离线状态下的PWA？

好问题！我之前在做PWA结合Vue Router历史模式的项目时，也踩过一模一样的坑——在线状态靠服务器重定向能正常工作，但离线时直接就404了。核心思路其实很简单：把服务器做的路由重定向工作，转移到Service Worker身上，下面给你一步步拆解解决方案：

1. 先确保Service Worker缓存了主页 #

离线状态下能拿到主页是基础，所以在Service Worker的安装阶段，一定要把index.html（也就是根路径/对应的资源）加入缓存列表。比如：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('pwa-cache-v1')
      .then((cache) => {
        return cache.addAll([
          '/',
          '/index.html',
          '/js/app.js',
          '/css/style.css',
          // 其他你需要缓存的静态资源
        ]);
      })
  );
});

2. 拦截导航请求，离线时返回主页 #

当用户在离线状态下访问某个路由（比如/route1），没有服务器帮我们重定向，就得让Service Worker来判断：如果是导航请求（也就是用户通过地址栏输入、页面刷新这类操作发起的请求），优先尝试从网络获取，失败的话直接返回缓存的主页。

在Service Worker的fetch事件里加这段逻辑：

self.addEventListener('fetch', (event) => {
  // 只处理导航类型的请求
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          // 离线时返回缓存的主页
          return caches.match('/') || caches.match('index.html');
        })
    );
  } else {
    // 静态资源的缓存策略（比如优先用缓存，缓存没有再请求网络）
    event.respondWith(
      caches.match(event.request)
        .then((cachedResponse) => {
          return cachedResponse || fetch(event.request);
        })
    );
  }
});

这里的event.request.mode === 'navigate'是关键，它能准确识别用户的导航行为，而非静态资源的加载请求，避免把JS/CSS这类资源也错误重定向到主页。

3. 几个避坑提醒 #

• 不要缓存路由路径：别把/route1这类路由当成静态资源缓存，不然Service Worker会直接返回不存在的缓存资源，而不是让Vue Router来处理路由。
• 缓存版本要更新：修改Service Worker代码后，记得更新缓存名称（比如把pwa-cache-v1改成pwa-cache-v2），不然浏览器会继续使用旧的缓存。
• 离线测试要到位：用Chrome DevTools的「Application」面板勾选「Offline」，刷新不同路由，确认都能正常加载主页并渲染对应组件。

这样处理后，不管在线还是离线，用户访问任何路由都会先拿到主页，然后由Vue Router接管前端路由的渲染，完美适配PWA的离线场景～

内容的提问来源于stack exchange，提问作者MattCochrane