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

发布日期： 2024-10-28 阅读量： 作者： 网络

在 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 # 数据丢失

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯3332 】【 SEO推广3271 】

上一篇: linux如何查找文件位置

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

随便看看