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

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《在 Vue.js 项目中，如何保留路由跳转前页面的数据？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

保留路由跳转前页面数据

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

思路 1

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

思路 2

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

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

// 旧页面代码
<template>
  <button @click="toNewPage">跳转到新页面</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 项目中，如何保留路由跳转前页面的数据？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！