vue.js - 在 vue-electron 中按下后退按钮时保存状态

Question

我想在 vue-electron 中制作一个桌面应用程序。我是 vue.js 和 electron 的新手。我在管理状态时遇到了一些问题。

当我点击登录按钮时 https://cloudup.com/cFl9MTY6cnn我发送数据，即 sessionId 和用户名到下一个屏幕 https://cloudup.com/c76fmL8OGbF在这个屏幕上我显示这些 Prop https://cloudup.com/csahnc6Z04J使用此代码 https://cloudup.com/cdR0F6Qyt-3但当我转到第三个屏幕时 https://cloudup.com/c0F1ztX8qu3然后回来然后这个数据就消失了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) “此方法采用单个整数作为参数，指示在历史堆栈中前进或后退的步数”

但是在我的例子中，当我回到历史堆栈时，生命周期 Hook 会被再次调用。那么这是否意味着当我们来到上一页时，该组件将再次创建并且不会从堆栈中弹出。我实际上不想在后退按钮上刷新/重新加载页面。

Answer 1

您也需要将数据发送到第三屏。

代替

<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.

您应该将 session ID 存储为 cookie，而不是将其作为 props 传递。

更新

另请参阅 <keep-alive></keep-alive> .

Reference