Vue 3与vue-router中报表状态保留及PDF预览问题求解

一、返回报表页时保留状态 #

用Keep-alive结合路由元信息缓存报表页面，步骤如下：

1. 修改路由配置
   给报表页面的路由（比如/quotations/inspection_list）添加meta.keepAlive标记：

const routes = [
  {
    path: '/quotations/inspection_list',
    name: 'InspectionList',
    component: () => import('./views/InspectionList.vue'),
    meta: { keepAlive: true } // 标记需要缓存
  },
  {
    path: '/quotations/inspection_list_PDF',
    name: 'InspectionListPDF',
    component: () => import('./views/InspectionListPDF.vue')
  }
];

2. 配置路由出口的Keep-alive
   在App.vue（或包含路由出口的父组件）中，用Keep-alive包裹需要缓存的路由组件：

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <!-- 只缓存带有keepAlive标记的路由组件 -->
      <component :is="Component" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 不缓存的组件直接渲染 -->
    <component :is="Component" v-else />
  </router-view>
</template>

这样当从报表页跳转到PDF页，再通过router.go(-1)返回时，报表页的组件状态（搜索参数、列表数据等）会被保留，无需重新加载。

二、新标签页打开PDF时正确显示状态 #

新标签页是独立的Vue实例，无法直接共享原页面状态，需通过路由参数传递必要数据：

1. 跳转时传递状态参数
   在报表页中，将需要的状态（如搜索条件、选中对象ID等）通过路由query传递：

// 假设报表页的状态存在reportState变量中
const route = router.resolve({
  path: '/quotations/inspection_list_PDF',
  query: {
    // 简单参数直接传递
    selectedId: reportState.selectedId,
    // 复杂对象转成JSON字符串传递
    searchParams: JSON.stringify(reportState.searchParams)
  }
});
window.open(route.href);

2. PDF页面接收并恢复状态
   在InspectionListPDF.vue中，通过路由获取参数并恢复状态：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    
    // 解析传递的参数
    const selectedId = route.query.selectedId;
    const searchParams = JSON.parse(route.query.searchParams || '{}');
    
    // 用参数请求数据，渲染PDF模板
    const fetchPDFData = async () => {
      const data = await api.getInspectionData(selectedId, searchParams);
      // 将数据传递给InspectionListTemplate组件使用
    };
    
    fetchPDFData();
    
    return { /* 导出需要的变量 */ };
  }
};

确保InspectionListTemplate组件能接收传递的数据并正确渲染，这样新标签页打开的PDF就能显示对应状态的内容。

内容的提问来源于stack exchange，提问作者ciska v d merwe