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

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

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

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

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

7 个回答

得票最新

himushroom

1.5k1317

发布于
2024-02-20 贵州

✓ 已被采纳

两个思路供参考：

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