Vuex、vue-router 和处理页面重新加载 (F5)答案

【问题标题】：Vuex, vue-router and handling page reload (F5)Vuex、vue-router 和处理页面重新加载 (F5)
【发布时间】：2017-06-10 21:38:52
【问题描述】：

我正在使用 vue-router 和 vuex 将我正在构建的应用程序切换为单页应用程序。但这是我的第一个 SPA，所以我遇到了一些新手问题。我的产品列表和编辑模式按我的意愿工作，通过/product/list 和/product/edit 成功路由，然后我发现（不出所料）当我使用 重新加载页面时，编辑模式出现问题F5（或 Ctrl-F5）。编辑模式取决于已在列表模式中设置的状态，并且在重新加载后不会发生这种情况。

所以我的问题是一般性的建筑问题。做这种事情的最好方法是什么？我是否应该尝试将 Vuex 状态持久化到本地或会话存储中，以便它可以在重新加载后存活下来？或者我应该确保能够使用路由 URL 中的信息重新生成状态（我目前没有这样做）？也就是说，我应该拥有/product/list?search=whatever&order=field，而不是拥有/product/list 的URL，以便在重新加载时可以再次执行搜索和排序。同样，我将使用/product/edit?id=12345，而不是/product/edit，这样如果刷新页面，就可以再次加载特定产品。

我的偏好是将状态持久化到 localStorage（我不必与没有存储的浏览器抗衡）。但我想知道我是否以错误的方式处理 SPA 设计，我仍然应该以 REST 术语来考虑它，即使这一切都发生在一个页面内。

【问题讨论】：

我应该补充一点，解决我的具体问题并没有花很长时间，使用 window.beforeunload 将商店的状态持久化到 sessionStorage，并在创建商店时测试此 sessionStorage 的存在。不过，我仍然想知道我是否在为未来制造问题。
您有没有找到更好的解决方案？

标签： vue.js vue-router vuex

【解决方案1】：

对我来说，完美的工作是：

const router = new Router ({

   // mode: "history",

   history: true,

   hashbang: false,

   root: "/your app directory",

   base: "",

      ...
      ...

【讨论】：

【解决方案2】：

我已通过在 URL 中保留 ID 并在重新加载时重新获取数据来解决此问题。当然，您可以持久保存到本地存储，但是当有人将该 URL 发送给另一个用户时会发生什么？还是将其添加为书签，然后清除其浏览器缓存？大多数用户都希望能够返回到他们所在的页面。

【讨论】：

这是一个公平的观察。碰巧的是，在特定情况下，这些考虑不太可能适用。如果发生这种情况，我会测试不一致的状态并重定向到 /product/list，但实际上不太可能发生。不过，未来值得考虑。