在 Vue.js 项目中，如何保留路由跳转前页面的数据？

保留路由跳转前页面数据

在使用 vue.js 项目时，你可能会遇到路由跳转到新页面后，返回旧页面时数据丢失的问题。下面介绍两种思路，帮助你保留旧页面数据：

思路 1

在跳转到新页面时，可以通过参数将旧页面的数据传递过去。返回时，根据参数判断是从新页面返回，使用传递的数据恢复旧页面状态。例如，可以使用 vuex 或 pinia 存储表单数据。

思路 2

将新页面设计为全屏弹窗。选择完成后，直接关闭弹窗，不会影响原有页面。这种方式更加简单。

以下代码示例展示了思路 1 的实现：

// 旧页面代码
<template><button>跳转到新页面</button>
</template><script>
import { useRouter } from 'vue-router';
import store from '../store';

export default {
  setup() {
    const router = useRouter();
    const toNewPage = () => {
      router.push({
        path: '/new-page',
        query: { data: store.state.formData },
      });
    };

    return { toNewPage };
  },
};
</script>

// 新页面代码
<template><select><option v-for="option in options" :value="option.value">{{ option.label }}</option></select></template><script>
import { useRouter, useRoute } from 'vue-router';
import store from '../store';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    const options = [
      { value: 'A', label: 'Option A' },
      { value: 'B', label: 'Option B' },
    ];

    const submit = () => {
      const formData = { value: route.query.data };
      store.commit('setFormData', formData);
      router.go(-1);
    };

    return { options, submit };
  },
};
</script>

以上就是在 Vue.js 项目中，如何保留路由跳转前页面的数据？的详细内容，更多请关注其它相关文章！