在 vue-electron 中按下后退按钮时保存状态
Saving state on back button press in vue-electron
我想在 vue-electron 中制作一个桌面应用程序。我对 vue.js 和电子都不熟悉。
我在管理状态时遇到了一些问题。
当我点击登录按钮时https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
我将使用 router.go(-1) https://cloudup.com/cvpxk4GsIRx
返回第二个屏幕
vue-router 文档 https://router.vuejs.org/en/essentials/navigation.html 说
“router.push 方法将一个新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。”
和 router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
但是在我的例子中，当我回到历史堆栈时，生命周期钩子被再次调用。那么这是否意味着当我们来到上一页时，该组件将再次创建并且不会从堆栈中弹出。我实际上不想在后退按钮上刷新/重新加载页面。
您也需要将数据发送到第三屏。
而不是
<route-link to="third_screen"></router-link>
你需要写，
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
而不是 router.go(-1)，您需要使用 router.push() 方法将数据作为参数再次发送到您的第二个屏幕。
但我不建议使用上述方法，因为您需要将与参数相同的数据传递给所有路由。
您还应该看看 Vuex。
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
您应该将会话 ID 存储为 cookie，而不是将其作为 props 传递。
更新
另请参阅 <keep-alive></keep-alive>。
我想在 vue-electron 中制作一个桌面应用程序。我对 vue.js 和电子都不熟悉。 我在管理状态时遇到了一些问题。
当我点击登录按钮时https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
我将使用 router.go(-1) https://cloudup.com/cvpxk4GsIRx
返回第二个屏幕vue-router 文档 https://router.vuejs.org/en/essentials/navigation.html 说 “router.push 方法将一个新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。” 和 router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
但是在我的例子中，当我回到历史堆栈时，生命周期钩子被再次调用。那么这是否意味着当我们来到上一页时，该组件将再次创建并且不会从堆栈中弹出。我实际上不想在后退按钮上刷新/重新加载页面。
您也需要将数据发送到第三屏。
而不是
<route-link to="third_screen"></router-link>
你需要写，
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
而不是 router.go(-1)，您需要使用 router.push() 方法将数据作为参数再次发送到您的第二个屏幕。
但我不建议使用上述方法，因为您需要将与参数相同的数据传递给所有路由。
您还应该看看 Vuex。
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
您应该将会话 ID 存储为 cookie，而不是将其作为 props 传递。
更新
另请参阅 <keep-alive></keep-alive>。