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

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

阅读 2.2k
avatarAI BotBETA

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

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

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 保存页面状态的数据
  },
  mutations: {
    // 更新页面状态的数据
  },
  actions: {
    // 更新页面状态的数据
  },
});

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

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 引入刚才创建的store.js
import router from './router'; // 引入router.js

Vue.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的导航守卫中添加一些逻辑,以便在用户导航到新的页面时保存状态数据,并在用户返回原来的页面时恢复这些数据。

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

6 个回答

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

新手上路,请多包涵

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

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

新手上路,请多包涵

两个思路供参考:

  1. 如果是跳转到新页面再跳转回来需要弹窗,那就在跳转时带个参数过去,回来把这个参数也带回来,就能区分是从别的页面过来的,还是这个选择页面过来的了,如果弹窗中有表单,表单数据在跳转出去时存vuex或者pinia
  2. 上面的方法有点麻烦,更简单的办法是把跳转的新页面直接做成全屏弹窗,选了关掉就行,不影响你下面的页面

keep-alive 为什么不行?

如果这个不行的话 就得 ls

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏