穿透式页面和菜单页面同时共存的解决方案

 在页面A（源页面）上点击一个卡片，穿透到页面B（目标页面）。将来自卡片A的特定“查询和统计参数”携带到页面B。页面B也可以通过其他方式访问（例如，从菜单栏直接进入）。页面B的初始状态：当通过其他入口直接打开时，页面B有自己的一套默认查询参数。

 “两种情况互相独立，互不干扰”。

目标页面（B）具有双重身份：

它可以是一个独立的页面，带有自己的一套默认参数（例如，通过菜单访问时）。

它可以是来自页面A的特定查询的“结果视图”，在这种情况下，它应该使用传入的参数。

“互不干扰”。这意味着一个入口点的逻辑不应该破坏或影响另一个入口点的逻辑。页面B的默认状态应保持不变，除非穿透逻辑明确地改变它

使用 Router Query 的解决方案：

页面A（发送方）：如何导航？useRouter() 和 router.push()

页面B（接收方）：如何读取URL参数？useRoute()

如何应用“两种情况互相独立”的逻辑？这是问题的核心。

需要：

1. 一个用于页面B默认状态的来源。称之为 defaultParams。
2. 一个用于穿透参数的来源。那就是 route.query。
3. 一个用来决定使用哪一套（或如何组合它们）的机制。
   •  使用一个 computed 属性提供“决策逻辑”。 
     • 创建一个 computed 属性 finalParams，它封装了 if/else 决策逻辑。

watch + onMounted 来触发实际的数据获取（fetchData），使用计算出的 finalParams。

详细代码实现

步骤一：页面A (发送方) - 发起穿透

<!-- PageA.vue -->
<template>
  <button @click="goToPageB">穿透到页面B，并携带参数</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToPageB = () => {
  router.push({
    name: 'PageB', // 假设路由名为 'PageB'
    // query对象就是开启“穿透轨道”的钥匙
    query: { 
      projectId: 'P-12345',
      status: 'critical',
      source: 'card-click' // 可以加一个来源标识，便于调试
    }
  });
};
</script>

 

步骤二：页面B (接收方) - 双轨决策

这是实现“互不干扰”的核心。我们将使用 computed 属性来创建一个清晰的决策器

<!-- PageB.vue -->
<script setup>
import { computed, watchEffect } from 'vue';
import { useRoute } from 'vue-router';const route = useRoute();// =================================================================
// 轨道一：【默认轨道】的定义
// 这是页面B的“出厂设置”，完全独立，不受任何外部影响。
// =================================================================
const defaultParams = Object.freeze({status: 'all',dateRange: 'lastMonth',sortBy: 'createdAt',projectId: '',
});// =================================================================
// 核心：【双轨决策器】
// 它的职责是判断当前应该使用哪条轨道的参数。
// 这个逻辑本身就是“两种情况互相独立”的最佳体现。
// =================================================================
const finalParams = computed(() => {// 判断信号：URL中是否存在任何查询参数？// 这是区分两种情况的唯一标准。const hasQueryParameters = Object.keys(route.query).length > 0;if (hasQueryParameters) {// 【走上穿透轨道】// URL中有参数，说明是穿透场景。// 完全、仅使用外部传来的参数，忽略默认设置。// console.log('[PageB] 检测到穿透参数，使用【穿透轨道】');return { ...route.query };} else {// 【走上默认轨道】// URL中没有参数，说明是独立访问场景。// 完全、仅使用页面内部的默认参数。// console.log('[PageB] 未检测到穿透参数，使用【默认轨道】');return { ...defaultParams };}
});// =================================================================
// 数据获取层
// 它只关心最终确定的参数，而不关心参数来自哪条轨道。
// =================================================================
const fetchData = () => {// 在这里，finalParams.value 是一个清晰、确定的参数集console.log('--- [PageB] 准备加载数据 ---');console.log('最终决策的参数集:', finalParams.value);// 调用API，使用 finalParams.value// yourApiService.fetchList(finalParams.value);
};// watchEffect会自动追踪 computed 属性 finalParams
// 当 finalParams 发生变化时（无论是首次加载还是URL变化），它都会重新执行 fetchData
watchEffect(() => {fetchData();
});
</script>

为什么这个方案可以解决了这个问题？

1. 逻辑隔离：defaultParams 和 route.query 在代码中是两个完全独立的数据源，它们在各自的“轨道”上运行，没有直接的合并或覆盖操作，从根本上避免了“干扰”。

2. 决策清晰：computed 属性 finalParams 成为一个明确的“决策中心”。它的内部 if/else 逻辑清晰地表达了“非此即彼”的选择，完美对应了“两种情况互相独立”。

3. 状态可预测：

   • 从菜单进入：URL干净，hasQueryParameters 为 false，使用默认轨道。页面状态100%由 defaultParams 决定。
   • 从页面A穿透：URL带参，hasQueryParameters 为 true，使用穿透轨道。页面状态100%由 route.query 决定。
   • 用户刷新页面：URL保持不变，computed 会重新计算并得出与刷新前完全相同的决策，状态保持一致。

4. 易于维护与扩展：

   • 如果要修改页面的默认行为，只需改 defaultParams，与穿透逻辑无关。
   • 如果页面A需要传递一个新参数，只需在A的 query 中添加，页面B会自动在穿透轨道中接收并使用。
   • 如果未来增加第三种情况（比如从页面C穿透，逻辑不同），只需在 computed 中增加一个 else if 分支即可，结构清晰，不会影响现有逻辑。