javascript - vu3项目实现路由跳转到新页面,返回旧页面,保留跳转之前的旧页面数据？

Question

如题，各位我有一个项目，现在有一个需求，在弹出窗口中跳转到一个选择页面，选择完成之后返回原来的页面，如何保持原来的页面状态不变？
尝试过使用keep-alive但是效果不理想。
请问有什么办法，或者什么思路！
备注：页面都是同一个站点的

Answer 1

弹窗的话原先也没不会变啊

Answer 2

把页面组件的数据放vuex里面，然后vuex使用持久化插件

Answer 3

偷懒的方案就是新开一个网页,要不就想办法用storage保存

Answer 4

在Vue中，你可以使用Vue Router的编程式导航和Vuex的状态管理来实现这个需求。以下是一个简单的实现方案：

首先，你需要安装并设置Vue Router和Vuex。然后，你可以创建一个新的Vuex存储来保存你在不同页面之间切换时需要保留的数据。

// store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({  state: {    // 保存页面状态的数据  },  mutations: {    // 更新页面状态的数据  },  actions: {    // 更新页面状态的数据  },});

然后，在你的主Vue实例中，你可以使用this.$store来访问这个存储。当用户导航到新的页面时，你可以在Vuex存储中保存需要保留的数据。当用户返回原来的页面时，你可以从Vuex存储中获取这些数据并更新页面的状态。

// main.jsimport Vue from 'vue';import App from './App.vue';import store from './store'; // 引入刚才创建的store.jsimport router from './router'; // 引入router.jsVue.config.productionTip = false;new Vue({  router,  store, // 将store添加到Vue实例中，使其可以在组件中使用this.$store来访问  render: h => h(App),}).$mount('#app');

在你的组件中，你可以使用this.$store.state来访问存储中的状态数据，使用this.$store.commit来提交一个突变来更新状态数据，使用this.$store.dispatch来派发一个动作来异步更新状态数据。

最后，你可以在Vue Router的导航守卫中添加一些逻辑，以便在用户导航到新的页面时保存状态数据，并在用户返回原来的页面时恢复这些数据。

这是一个基本的实现方案，具体的实现细节可能因你的项目需求而有所不同。