我正在使用vue-router和vuex将我正在构建的应用程序切换为单页面应用程序。但这是我的第一个SPA，所以我对一些新手问题不屑一顾。通过我的产品列表和编辑模式，我可以通过/product/list和/product/edit成功路由，然后我发现（重要的是）当我重新加载页面时，编辑模式已经破坏了使用 F5 （或 Ctrl - F5 ）。编辑模式取决于已在列表模式中设置的状态，并且在重新加载后尚未发生此状态。
所以我的问题是一般的建筑问题。做这种事的最好方法是什么？我是否应该尝试将Vuex状态持久保存到本地或会话存储，以便它可以在重新加载后继续存在？或者我应该确保能够使用路由URL中的信息（我目前没有这样做）重新生成状态吗？也就是说，我不应该将URL设置为/product/list，而应该有/product/list?search=whatever&order=field，这样在重新加载时可以再次执行搜索和排序。同样，我没有/product/edit，而是/product/edit?id=12345，所以如果页面被刷新，则可以再次加载特定产品。
我的偏好是将状态持久保存到localStorage（我不必与没有存储的浏览器竞争）。但我想知道我是否以错误的方式接近SPA设计，我仍然应该以REST术语来考虑它，即使它只是在一页内发生。
答案 0 :(得分：1)
我通过将ID保存在URL中然后在重新加载时重新获取数据来处理此问题。当然你可以坚持本地存储但是当有人将该URL发送给另一个用户时会发生什么？或者书签然后清除他们的浏览器缓存？大多数用户希望能够返回他们所在的页面。
答案 1 :(得分：1)
对我来说，最有效的方法是：
const router = new Router ({
// mode: "history",
history: true,
hashbang: false,
root: "/your app directory",
base: "",
...
...