Vue+Quasar+TypeScript提交数据后跳转传值至组件并展示

一、跨页面传递stepCreationList数据 #

从user.vue跳转至api-explorer/index.vue时，可根据数据量和业务需求选择以下三种方案传递数据：

方案1：路由参数传递（适合小数据量） #

修改user.vue中的跳转逻辑，将数据转为JSON字符串通过路由params传递：

const onEditSubmit = async () => {
  try {
    const response = await axios.post('http://localhost/SPV2API/api/SalaryPackage/CreateSalaryPackage', data);
    const stepCreationList = response.data;
    
    router.push({
      name: ROUTE_NAME.API_EXPLORER,
      params: { stepData: JSON.stringify(stepCreationList) } // 转JSON避免参数丢失
    });
  } catch (error) {
    // 错误处理逻辑
  }
};

在api-explorer/index.vue中接收并解析数据：

import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';

const route = useRoute();
const stepCreationList = ref<any[]>([]); // 替换为你的StepCreation类型

onMounted(() => {
  if (route.params.stepData) {
    stepCreationList.value = JSON.parse(route.params.stepData as string);
  }
});

方案2：状态管理（Pinia/Vuex，适合大数据量或多页面共享） #

以Pinia为例，先创建状态管理文件stepStore.ts：

import { defineStore } from 'pinia';

export const useStepStore = defineStore('step', {
  state: () => ({
    stepList: [] as any[] // 替换为你的StepCreation类型
  }),
  actions: {
    setStepList(data: any[]) {
      this.stepList = data;
    }
  }
});

在user.vue中提交数据到状态管理：

import { useStepStore } from '@/stores/stepStore';

const onEditSubmit = async () => {
  try {
    const response = await axios.post('http://localhost/SPV2API/api/SalaryPackage/CreateSalaryPackage', data);
    const stepCreationList = response.data;
    
    const stepStore = useStepStore();
    stepStore.setStepList(stepCreationList);
    
    router.push({ name: ROUTE_NAME.API_EXPLORER });
  } catch (error) {
    // 错误处理逻辑
  }
};

在api-explorer/index.vue中从状态管理获取数据：

import { useStepStore } from '@/stores/stepStore';
import { ref, onMounted } from 'vue';

const stepStore = useStepStore();
const stepCreationList = ref<any[]>([]);

onMounted(() => {
  stepCreationList.value = stepStore.stepList;
});

方案3：本地存储（sessionStorage/localStorage，临时存储） #

在user.vue中存储数据到本地：

const onEditSubmit = async () => {
  try {
    const response = await axios.post('http://localhost/SPV2API/api/SalaryPackage/CreateSalaryPackage', data);
    const stepCreationList = response.data;
    
    sessionStorage.setItem('stepCreationList', JSON.stringify(stepCreationList));
    
    router.push({ name: ROUTE_NAME.API_EXPLORER });
  } catch (error) {
    // 错误处理逻辑
  }
};

在api-explorer/index.vue中读取本地存储的数据：

import { ref, onMounted } from 'vue';

const stepCreationList = ref<any[]>([]);

onMounted(() => {
  const storedData = sessionStorage.getItem('stepCreationList');
  if (storedData) {
    stepCreationList.value = JSON.parse(storedData);
    sessionStorage.removeItem('stepCreationList'); // 用完清理避免残留
  }
});

二、动态渲染q-stepper组件 #

修改api-explorer/index.vue模板，通过v-for循环生成q-step，绑定接口返回的数据（假设每个step对象包含name、title、icon、done等字段，可根据实际接口返回调整）：

<template>
  <div class="q-pa-md">
    <q-stepper
      v-model="currentStep"
      header-nav
      ref="stepper"
      color="primary"
      animated
    >
      <q-step
        v-for="stepItem in stepCreationList"
        :key="stepItem.name"
        :name="stepItem.name"
        :title="stepItem.title"
        :icon="stepItem.icon || 'settings'"
        :done="stepItem.done"
      >
        <!-- 步骤内容，根据stepItem数据自定义渲染 -->
        <div>{{ stepItem.content }}</div>
      </q-step>
    </q-stepper>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 此处引入你选择的传递方案对应的代码（路由参数/状态管理/本地存储）

const currentStep = ref(1); // 默认激活第一个步骤
const stepCreationList = ref<any[]>([]);

// 示例：路由参数方案的接收逻辑
import { useRoute } from 'vue-router';
const route = useRoute();

onMounted(() => {
  if (route.params.stepData) {
    stepCreationList.value = JSON.parse(route.params.stepData as string);
    // 若需默认激活最后一步，可添加以下代码
    // currentStep.value = stepCreationList.value[stepCreationList.value.length - 1].name;
  }
});
</script>

注意事项 #

• 使用路由params传递时，需确保API_EXPLORER路由已配置对应的params参数；若不想暴露数据在URL中，建议用状态管理方案。
• 状态管理方案中，若需页面刷新后数据不丢失，可配置Pinia持久化插件。
• 本地存储方案有数据大小限制，敏感数据不建议使用该方式。

内容的提问来源于stack exchange，提问作者Mira