Vue路由器历史模式，其中PWA处于脱机模式
要使历史模式与Vue-Router一起工作，您需要在尝试访问不存在的路由时返回主页的内容。例如，当你访问mypwa.com/route1时，你的服务器会检查route1上是否有资源，如果没有，它会返回在mypwa.com/上找到的内容(但不会重定向给你)。这是很棒的，当你在线的时候可以工作，但是它需要你的服务器做实际的重新路由。
如果您有一个需要脱机工作的PWA，那么您需要重新路由才能在服务器不可用的情况下工作。
问题是:离线时访问mypwa.com/是可行的。加载后，您可以从应用程序内部导航到mypwa.com/route1。然而，如果你试图在离线时直接导航到mypwa.com/route1，你会得到一个404错误，因为mypwa.com/route1没有被缓存，只有/被缓存。我想这意味着你需要在你的服务工作者中使用某种备用条款？有谁知道实现这一点的方法吗？有没有用sw-precache there plugin这样做的通用方法？
回答 2
Stack Overflow用户
发布于 2019-12-18 18:18:23
您需要在vue.config.js文件中设置navigateFallback选项：
pwa: {
workboxOptions: {
navigateFallback: 'index.html'
}
}它会自动将必要的代码添加到您的服务工作者中：
workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("index.html"));我也遇到了同样的问题，我在这里找到了解决方案：https://github.com/vuejs/vue-cli/issues/717#issuecomment-382079361
Stack Overflow用户
发布于 2018-10-13 09:54:12
如果您的站点是单页面应用程序，则可以使用NavigationRoute为所有导航请求返回特定的响应。
workbox.routing.registerNavigationRoute('/single-page-app.html')在我的vue案例中：
workbox.routing.registerNavigationRoute('/index.html')当用户在浏览器中访问您的站点时，对该页面的请求将是一个导航请求，并将通过缓存的页面/single-page-app.html进行处理。
注意：您应该通过工作箱缓存或通过您自己的安装步骤来缓存页面)。
默认情况下，这将响应所有导航请求，如果您希望将其限制为响应URL的子集，您可以使用白名单和黑名单选项来限制哪些页面将与此路由匹配。
更新: Workbox V5
const handler = workbox.precaching.createHandlerBoundToURL("/index.html");
const navigationRoute = new workbox.routing.NavigationRoute(handler);
workbox.routing.registerRoute(navigationRoute);https://stackoverflow.com/questions/49963982
复制相似问题
腾讯云开发者
