<think>在Vue3中，
页面之间
传值通常可以通过路由参数、查询参数、状态管理（如Pinia）或事件总线等方式实现。但是，由于问题要求“只
传值，
不显示另
一个页面”，这意味着我们
并不需要导航到目标
页面，而是要在当
前页面将数据
传递给另
一个页面，然后另
一个页面在后续的某个时刻（比如当它被激活时）能够
接收到这个
值。
根据这个需求，我们可以考虑以下几种方案：
1. 使用状态管理（推荐）：将数据存储在全局状态中，另
一个页面可以从全局状态中读取。
2. 使用事件总线：虽然Vue3中移除了事件总线，但我们仍然可以手动实现
一个事件总线，或者使用第三方库（如mitt）来实现。
3. 使用浏览器的本地存储（localStorage或sessionStorage）：
一个页面将数据存入存储，另
一个页面监听存储事件
并读取。
4. 使用路由参数或查询参数：但这种方法通常需要导航到目标
页面，
不符合“
不显示另
一个页面”的要求。
考虑到“
不显示另
一个页面”，我们可能希望在
一个页面中触发数据
传递，而另
一个页面在后台（可能是已经打开但处于非激活状态）能够
接收到数据。在这种情况下，使用全局状态管理或本地存储是更合适的。
这里我们使用Pinia（Vue3官方推荐的状态管理库）作为示例，因为它可以跨组件/
页面共享状态，
并且响应式。
步骤：
1. 安装Pinia（如果尚未安装）：
```bash
npm install pinia
```
2. 创建
一个store来存储数据。例如，我们创建
一个名为`messageStore`的store。
3. 在发送
页面（PageA）中设置store中的数据。
4. 在
接收页面（PageB）中，我们可以在其挂载时（或使用watch）读取store中的数据，
并执行相应操作。
但是，由于问题要求“
不显示另
一个页面”，所以PageB可能
并没有被激活，因此我们可能需要在PageB激活时（比如通过路由守卫或onActivated生命周期钩子）去获取数据。
另一种情况是，我们可能希望PageB在数据变化时立即得到通知，即使它当
前不是活动
页面。但是，如果PageB没有激活，我们通常
不会去更新它，除非我们希望在它下次激活时获取最新数据。
因此，我们可以这样设计：
- 使用Pinia存储数据，
并且这个数据是响应式的。
- 在PageB中，我们使用watch来监听store中数据的变化，
并执行操作（比如将数据保存到本地变量，或者执行某些逻辑）。但是，如果PageB没有被激活，watch可能
不会立即触发，但等到PageB激活时，Vue会处理这些变化。
然而，如果我们需要在数据变化时立即执行一些操作（无论PageB是否激活），我们可以考虑在store中使用订阅（subscribe）或者使用事件总线。
这里我们给出使用Pinia的示例：
首先，定义store（假设在store/message.js）：
```javascript
import { defineStore } from 'pinia'
export const useMessageStore = defineStore('message', {
state: () => ({
message: null,
// 可以添加其他需要共享的状态
}),
actions: {
setMessage(newMessage) {
this.message = newMessage
}
}
})
```
在发送
页面（PageA）中：
```vue
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script setup>
import { useMessageStore } from '@/store/message'
const messageStore = useMessageStore()
const sendMessage = () => {
messageStore.setMessage('Hello from PageA!')
// 发送后，我们可以
跳转到PageB，也可以
不跳转（根据需求）
}
</script>
```
在
接收页面（PageB）中，我们可以监听store中message的变化：
```vue
<template>
<div>
接收到的消息：{{ receivedMessage }}</div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useMessageStore } from '@/store/message'
import { storeToRefs } from 'pinia'
const messageStore = useMessageStore()
// 使用storeToRefs来保持响应式，或者直接使用store.state
// 方法1：直接使用store.state
并watch
const receivedMessage = ref(null)
// 监听store中的message变化
watch(
() => messageStore.message,
(newVal) => {
if (newVal) {
receivedMessage.value = newVal
// 可以在这里执行一些操作
console.log('
接收到消息:', newVal)
// 如果需要，可以重置消息（根据业务逻辑）
// messageStore.setMessage(null) // 避免重复触发
}
},
{ immediate: true } // 立即执行
一次，以便获取初始
值
)
</script>
```
但是，上述方法在PageB激活时会正常工作。如果PageB没有激活，watch仍然会建立，但
不会更新DOM（因为
页面未激活），但一旦激活，Vue会更新DOM。
如果我们希望PageB在未激活时也能执行一些逻辑（比如发送网络请求，记录日志等），那么watch是会被触发的，因为watch是Vue的响应式系统的一部分，与
页面是否激活无关。但是，需要注意的是，如果PageB组件被卸载（比如使用keep-alive时，它会被缓存而
不是卸载），那么watch
不会触发。对于被keep-alive缓存的组件，我们可以使用onActivated钩子来执行一些操作。
另外，如果发送消息时PageB还没有被创建，那么消息可能会先被设置，然后PageB才创建，此时在watch中设置immediate:true可以确保获取到初始
值（即最新的消息）。
但是，如果PageB被创建后，我们
不想让它一直监听，可以在PageB卸载时取消watch（但通常如果
页面被卸载，我们可能
不需要取消，因为watch会随着组件的卸载而自动停止）。
另一种方案：使用事件总线
安装mitt：
```bash
npm install mitt
```
创建
一个事件总线（eventBus.js）：
```javascript
import mitt from 'mitt'
export const emitter = mitt()
```
在PageA中发送事件：
```vue
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script setup>
import { emitter } from '@/eventBus'
const sendMessage = () => {
emitter.emit('message', 'Hello from PageA!')
}
</script>
```
在PageB中监听事件：
```vue
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { emitter } from '@/eventBus'
const handleMessage = (message) => {
console.log('
接收到消息:', message)
// 执行操作
}
onMounted(() => {
emitter.on('message', handleMessage)
})
onUnmounted(() => {
emitter.off('message', handleMessage)
})
</script>
```
事件总线的优势是，无论PageB是否激活，只要它被挂载（mounted）就会监听事件，
并在事件
发生时执行回调。但是，如果PageB没有被挂载（比如还没有被访问过），那么事件将
不会被处理（除非有全局监听）。另外，事件总线是全局的，所以需要小心管理，避免内存泄漏（在组件卸载时移除监听）。
根据需求，如果两个
页面同时存在（比如都是同
一个应用的
页面，且同时被加载，比如多标签应用），那么事件总线可以工作。如果
接收页面还没有被加载，那么事件总线无法
传递（因为监听器还没有注册）。在这种情况下，使用Pinia存储消息，然后当PageB加载时再读取，可能是更好的选择。
总结：根据实际场景选择方案：
- 如果两个
页面同时存在（比如SPA中的两个路由，
并且都已经被加载，但
一个在后台），可以使用事件总线或Pinia。
- 如果
接收页面可能还没有被加载，那么使用Pinia（或本地存储）存储数据，等
接收页面加载时再读取。
这里我们给出
一个使用Pinia的完整示例，因为它更通用，
并且可以处理
接收页面尚未加载的情况。
但是，请注意，如果使用Pinia，在
接收页面中，我们可能需要清除消息，以避免重复处理。例如，在PageB中处理消息后，可以将store中的消息重置为null。或者，我们可以设计
一个队列来存储多条消息。
最后，根据问题要求，我们只
传值，
不显示另
一个页面，所以我们在PageA中发送消息后，
并不进行路由
跳转。
因此，我们推荐使用Pinia作为解决方案。
如果项目中没有使用Pinia，也可以考虑使用本地存储（localStorage）
并结合storage事件来实现跨
页面通信（即使
页面不在同
一个标签页也可以，但需要同源）。但是，这种方法只能
传递字符串，且需要处理序列化和反序列化。
这里也给出本地存储的示例：
PageA:
```javascript
localStorage.setItem('my-app:message', JSON.stringify({ text: 'Hello from PageA!' }))
```
PageB:
```javascript
window.addEventListener('storage', (event) => {
if (event.key === 'my-app:message' && event.newValue) {
const message = JSON.parse(event.newValue)
console.log('
接收到消息:', message.text)
// 处理消息
// 注意：storage事件只有在同源的其他
页面修改storage时才会触发，当
前页面修改
不会触发。
}
})
```
但是，这种方法只适用于跨标签页的通信，且事件触发有延迟，
并且需要处理浏览器兼容性。
综上所述，对于单页应用（SPA）内的两个
页面（路由），使用Pinia是更简单和直接的方式。
因此，我们主要介绍Pinia方案。
如果项目中没有使用Pinia，可以考虑使用事件总线（如果两个
页面同时存在）或者本地存储（如果
页面可能在
不同标签页）。
根据问题，我们假设是在同
一个SPA中，所以使用Pinia或事件总线都可以。
由于问题要求“
一个页面给另
一个页面传值，
不显示另
一个页面”，我们假设两个
页面都在同
一个SPA中，
并且可能同时存在（比如通过keep-alive缓存，或者两个
页面都是已经加载过的路由）。因此，我们使用Pinia作为主要方案。
代码示例已在上面给出。
相关问题：
请注意，根据要求，最后需要提出四个相关问题，格式如下：</think>在 Vue 3 中实现
页面间
传值而
不显示目标
页面，可以通过以下几种方法实现：
### 推荐方法 1：使用 Pinia 状态管理（推荐）
这是最简洁高效的方式，适合跨组件/
页面共享数据。
1. 安装 Pinia：
```bash
npm install pinia
```
2. 创建 store 文件 (`src/stores/message.js`)：
```javascript
import { defineStore } from 'pinia';
export const useMessageStore = defineStore('message', {
state: () => ({
data: null,
}),
actions: {
setData(payload) {
this.data = payload;
},
clearData() {
this.data = null;
}
}
});
```
3. 发送
页面 (Sender.vue)：
```vue
<script setup>
import { useMessageStore } from '@/stores/message';
const messageStore = useMessageStore();
const sendData = () => {
// 设置要
传递的数据
messageStore.setData({
id: 123,
content: '秘密消息'
});
console.log('数据已发送');
};
</script>
<template>
<button @click="sendData">发送数据</button>
</template>
```
4.
接收页面 (Receiver.vue)：
```vue
<script setup>
import { onMounted } from 'vue';
import { useMessageStore } from '@/stores/message';
const messageStore = useMessageStore();
onMounted(() => {
if (messageStore.data) {
console.log('收到数据:', messageStore.data);
// 处理数据...
// 清除数据（可选）
messageStore.clearData();
}
});
</script>
```
### 推荐方法 2：使用事件总线（mitt）
适合简单场景的轻量级解决方案。
1. 安装 mitt：
```bash
npm install mitt
```
2. 创建事件总线 (`src/utils/eventBus.js`)：
```javascript
import mitt from 'mitt';
export default mitt();
```
3. 发送
页面 (Sender.vue)：
```vue
<script setup>
import eventBus from '@/utils/eventBus';
const sendData = () => {
eventBus.emit('secret-data', {
id: 456,
content: '通过事件发送'
});
console.log('事件数据已发送');
};
</script>
<template>
<button @click="sendData">通过事件发送</button>
</template>
```
4.
接收页面 (Receiver.vue)：
```vue
<script setup>
import { onMounted, onUnmounted } from 'vue';
import eventBus from '@/utils/eventBus';
const handleData = (data) => {
console.log('通过事件收到数据:', data);
// 处理数据...
};
onMounted(() => {
eventBus.on('secret-data', handleData);
});
onUnmounted(() => {
eventBus.off('secret-data', handleData);
});
</script>
```
### 备选方法：使用 localStorage/sessionStorage
适合需要持久化或跨会话的数据。
发送
页面：
```javascript
const sendViaStorage = () => {
const data = { id: 789, content: '存储数据' };
sessionStorage.setItem('secretPayload', JSON.stringify(data));
};
```
接收页面：
```javascript
onMounted(() => {
const rawData = sessionStorage.getItem('secretPayload');
if (rawData) {
const data = JSON.parse(rawData);
console.log('从存储收到数据:', data);
sessionStorage.removeItem('secretPayload');
}
});
```
### 方法对比
| 方法 | 优点 | 缺点 |
|--------------|-------------------------------|--------------------------|
| **Pinia** | 响应式，类型安全，易于维护 | 需要额外安装状态管理库 |
| **事件总线** | 轻量级，简单直接 | 需要手动管理事件监听 |
| **本地存储** | 支持
页面刷新后读取 | 数据格式受限，需序列化 |
### 使用建议
1. **Pinia** 是最推荐的解决方案，尤其适合中大型应用
2. 简单场景可使用 **事件总线**，但要注意及时清理监听器
3. 需要跨会话持久化数据时使用 **本地存储**
4. 避免使用 Vuex 4（Vue 3 官方推荐使用 Pinia）
本文介绍了一种在Ultimus流程管理系统中实现审批流程的方法。通过使用jQuery操作iframe元素，可以轻松地将带有参数的审批页面嵌入到现有界面上。
扫一扫
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
