Vue中跨页面通信的8种主流方式详解

在Vue项目的实际开发中，跨页面通信——也就是非父子组件、不同路由页面之间的数据传递——几乎是一个绕不开的坎。常见的场景包括列表页跳转详情页时需要携带数据，或者页面A完成某个操作后，希望页面B的内容能同步更新。这篇文章整理了8种主流的通信方式，按照常用度和实用性做了排序，每种方式都附上了完整可运行的Demo、适配场景以及注意事项，同时覆盖了Vue2和Vue3的项目场景。即便是刚入门的新手，拿过去也能直接落地使用。

一、路由参数传递（最常用，简单场景首选）

核心思路其实很简单：通过路由跳转时携带参数，目标页面接收参数。这种方式最适合“页面跳转传值”的场景，比如从列表页跳到详情页。具体又分为query参数和params参数两种，按需选择就好。

query参数（路径可见，适合简单数据）

适配场景：列表页跳转详情页，传递简单的ID、名称等数据，刷新页面不会丢失。

前置准备：已经配置好Vue Router（Vue2/Vue3均可，下面分别给出两种版本的Demo）。

Vue3 Demo（组合式API）

// 1. 路由配置（router/index.js）import { createRouter, createWebHistory } from 'vue-router';import PageA from '@/views/PageA.vue';import PageB from '@/views/PageB.vue';const routes = [  { path: '/pageA', name: 'PageA', component: PageA },  { path: '/pageB', name: 'PageB', component: PageB }];const router = createRouter({  history: createWebHistory(),  routes});export default router;// 2. 页面A（跳转方，@/views/PageA.vue）// 3. 页面B（接收方，@/views/PageB.vue）// 4. main.js（入口文件）import { createApp } from 'vue';import App from './App.vue';import router from './router';createApp(App).use(router).mount('#app');

Vue2 Demo（选项式API）

// 1. 路由配置（router/index.js）import Vue from 'vue';import Router from 'vue-router';import PageA from '@/views/PageA';import PageB from '@/views/PageB';Vue.use(Router);export default new Router({  routes: [    { path: '/pageA', name: 'PageA', component: PageA },    { path: '/pageB', name: 'PageB', component: PageB }  ]});// 2. 页面A（跳转方，@/views/PageA.vue）// 3. 页面B（接收方，@/views/PageB.vue）// 4. main.js（入口文件）import Vue from 'vue';import App from './App';import router from './router';new Vue({  el: '#app',  router,  components: { App },  template: ''});

params参数（路径不可见，适合敏感/复杂数据）

适配场景：传递敏感数据（比如用户隐私信息），路径不可见，需要在路由配置中添加占位符，避免刷新后数据丢失。

Vue3 Demo（组合式API）

// 1. 路由配置（router/index.js，必须添加params占位符）import { createRouter, createWebHistory } from 'vue-router';import PageA from '@/views/PageA.vue';import PageB from '@/views/PageB.vue';const routes = [  { path: '/pageA', name: 'PageA', component: PageA },  // 配置params占位符：:id、:name（与传递的参数名一致）  { path: '/pageB/:id/:name', name: 'PageB', component: PageB }];const router = createRouter({  history: createWebHistory(),  routes});export default router;// 2. 页面A（跳转方，@/views/PageA.vue）// 3. 页面B（接收方，@/views/PageB.vue）

Vue2 Demo（选项式API）

// 1. 路由配置（router/index.js）import Vue from 'vue';import Router from 'vue-router';import PageA from '@/views/PageA';import PageB from '@/views/PageB';Vue.use(Router);export default new Router({  routes: [    { path: '/pageA', name: 'PageA', component: PageA },    { path: '/pageB/:id/:name', name: 'PageB', component: PageB }  ]});// 2. 页面A（跳转方，@/views/PageA.vue）// 3. 页面B（接收方，@/views/PageB.vue）

注意事项

• query参数：路径可见（比如/pageB?id=123），刷新页面不丢失，适合传递简单数据（字符串、数字）；
• params参数：路径不可见，刷新页面会丢失（除非路由配置中写了占位符），适合传递敏感或临时数据；
• 传递复杂数据（比如对象）时，需要先通过JSON.stringify转成字符串，接收时再用JSON.parse解析，避免数据错乱。

二、Vuex/Pinia（全局状态管理，复杂场景首选）

核心思路是通过全局状态仓库来存储数据，所有页面都可以读写。这种方式适合“多页面共享数据”的场景，比如用户信息、全局配置、多页面联动。Vue2中常用Vuex，Vue3则更推荐Pinia，因为它更轻量、更简洁。

Pinia（Vue3首选）

适配场景：多页面共享用户信息、全局计数器等，支持跨页面实时联动，无需手动传递参数。

前置准备：先安装Pinia依赖（npm install pinia）。

// 1. 创建Pinia实例并注册（main.js）import { createApp } from 'vue';import App from './App.vue';import { createPinia } from 'pinia'; // 引入Piniaimport router from './router';const app = createApp(App);app.use(createPinia()); // 注册Piniaapp.use(router);app.mount('#app');// 2. 创建全局仓库（store/modules/user.js）import { defineStore } from 'pinia';// 定义仓库（user为仓库唯一标识）export const useUserStore = defineStore('user', {  state: () => ({    userInfo: { id: 1, name: '测试用户', age: 20 }, // 全局共享数据    count: 0 // 全局计数器（用于跨页面联动）  }),  actions: {    // 修改用户信息    setUserInfo(info) {      this.userInfo = info;    },    // 增加计数器    addCount() {      this.count++;    },    // 重置计数器    resetCount() {      this.count = 0;    }  }});// 3. 页面A（修改全局数据，@/views/PageA.vue）// 4. 页面B（读取/修改全局数据，@/views/PageB.vue）

Vuex（Vue2常用）

前置准备：安装Vuex依赖（npm install vuex@3，Vue2对应Vuex3版本）。

// 1. 创建Vuex仓库并注册（main.js）import Vue from 'vue';import App from './App';import router from './router';import Vuex from 'vuex'; // 引入Vueximport store from './store'; // 引入仓库Vue.use(Vuex); // 注册Vuexnew Vue({  el: '#app',  router,  store, // 注入仓库  components: { App },  template: ''});// 2. 创建全局仓库（store/index.js）import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({  state: {    userInfo: { id: 1, name: '测试用户', age: 20 },    count: 0  },  mutations: {    // 同步修改状态（必须通过mutation修改state）    setUserInfo(state, info) {      state.userInfo = info;    },    addCount(state) {      state.count++;    },    resetCount(state) {      state.count = 0;    }  },  actions: {    // 异步修改状态（如接口请求后修改）    addCountAsync({ commit }) {      setTimeout(() => {        commit('addCount'); // 调用mutation修改state      }, 1000);    }  },  getters: {    // 计算属性（简化数据读取）    userName: state => state.userInfo.name  }});// 3. 页面A（修改全局数据，@/views/PageA.vue）// 4. 页面B（读取/修改全局数据，@/views/PageB.vue）

注意事项

• Pinia不需要手动注册，Vuex则需要在main.js中注册（Vue2通过Vue.use(Vuex)，Vue3通过app.use(store)）；
• 全局状态在页面刷新后会丢失，需要配合localStorage或sessionStorage做缓存（下文会讲到）；
• 这种方式适合频繁共享、多页面联动的数据，对于临时跳转传值来说，就显得有些大材小用了。

三、localStorage/sessionStorage（本地存储，持久化传值）

核心思路是利用浏览器本地存储API，将数据存入本地，所有页面都可以读取。这种方式适合“持久化数据”场景，比如用户登录状态、记住密码、长期保存的配置。分为两种存储方式，按需选择。

完整可运行Demo（Vue2/Vue3通用）

适配场景：持久化存储用户登录状态、记住密码，刷新页面不丢失，跨页面共享。

// 1. 封装本地存储工具（utils/storage.js，简化版，通用）// 存储localStorage（永久存储）export const setLocal = (key, value) => {  // 处理对象/数组，转为字符串  const val = typeof value === 'object' ? JSON.stringify(value) : value;  localStorage.setItem(key, val);};// 获取localStorageexport const getLocal = (key) => {  const val = localStorage.getItem(key);  try {    // 尝试解析为对象/数组    return JSON.parse(val);  } catch (e) {    // 解析失败，返回原始字符串    return val;  }};// 删除localStorageexport const removeLocal = (key) => {  localStorage.removeItem(key);};// 存储sessionStorage（会话存储）export const setSession = (key, value) => {  const val = typeof value === 'object' ? JSON.stringify(value) : value;  sessionStorage.setItem(key, val);};// 获取sessionStorageexport const getSession = (key) => {  const val = sessionStorage.getItem(key);  try {    return JSON.parse(val);  } catch (e) {    return val;  }};// 2. 页面A（存储数据，@/views/PageA.vue，Vue3示例，Vue2用法类似）// 3. 页面B（读取数据，@/views/PageB.vue，Vue3示例）// Vue2 页面B示例（@/views/PageB.vue）

注意事项

• 本地存储只能存字符串，传递对象或数组时，需要用JSON.stringify转成字符串，接收时用JSON.parse解析；
• localStorage的容量大约5MB，不适合存储过大体积的数据，而且数据暴露在本地，敏感数据（比如token）建议加密后再存；
• 数据变化时，页面不会自动响应，需要手动监听（下文“监听本地存储”会补充）。

四、EventBus（事件总线，简单跨页面通信）

核心思路是创建一个全局事件总线，页面A触发事件并传递数据，页面B监听事件并接收数据。这种方式适合简单的跨页面联动场景，比如页面A操作后，页面B同步更新。Vue2和Vue3的实现方式略有差异。

Vue3 实现

适配场景：页面A修改数据后，页面B实时更新，无需跳转路由（比如两个标签页联动）。

// 1. 创建事件总线（utils/eventBus.js）import { ref } from 'vue';// 定义总线容器const bus = ref({});// 触发事件（发送数据）export const emitEvent = (eventName, data) => {  // 若有监听该事件的回调，执行并传递数据  bus.value[eventName]?.(data);};// 监听事件（接收数据）export const onEvent = (eventName, callback) => {  // 注册回调函数  bus.value[eventName] = callback;};// 取消监听（避免内存泄漏）export const offEvent = (eventName) => {  // 删除事件回调  delete bus.value[eventName];};// 2. 页面A（触发事件，发送数据，@/views/PageA.vue）// 3. 页面B（监听事件，接收数据，@/views/PageB.vue）

Vue2 实现

// 1. 注册全局EventBus（main.js）import Vue from 'vue';import App from './App';import router from './router';// 注册全局总线（挂载到Vue原型上）Vue.prototype.$bus = new Vue();new Vue({  el: '#app',  router,  components: { App },  template: ''});// 2. 页面A（触发事件，发送数据，@/views/PageA.vue）// 3. 页面B（监听事件，接收数据，@/views/PageB.vue）

注意事项

• EventBus适合简单通信，复杂场景（多页面、多事件）容易造成事件混乱，这种情况下更推荐用Pinia或Vuex；
• 组件销毁时一定要取消监听，否则会导致内存泄漏；
• 如果页面B还没渲染，监听事件可能接收不到数据——需要确保页面B已经渲染完成，再去触发事件。

五、监听localStorage/sessionStorage（数据变化响应）

核心思路是基于本地存储，监听存储数据的变化。当页面A修改本地存储时，页面B能自动感知并更新，这样就解决了“本地存储数据变化不响应”的问题。适合持久化数据联动的场景。

完整可运行Demo（Vue2/Vue3通用）

适配场景：页面A修改本地存储的用户配置，页面B自动同步更新，无需手动刷新。

// 1. 封装本地存储工具（utils/storage.js，同上文，可直接复用）export const setLocal = (key, value) => {  const val = typeof value === 'object' ? JSON.stringify(value) : value;  localStorage.setItem(key, val);};export const getLocal = (key) => {  const val = localStorage.getItem(key);  try { return JSON.parse(val); } catch (e) { return val; }};// 2. 页面A（修改本地存储，触发变化，@/views/PageA.vue，Vue3示例）// 3. 页面B（监听本地存储变化，自动更新，@/views/PageB.vue，Vue3示例）// Vue2 页面B示例

注意事项

• storage事件只在“不同页面”之间触发，同一个页面修改本地存储，不会触发自身的storage事件；
• 只能监听localStorage和sessionStorage的变化，无法监听Cookie的变化；
• 传递复杂数据时，需要配合JSON.stringify和JSON.parse进行解析。

六、Cookie（小型数据，跨域/持久化适配）

核心思路是利用浏览器Cookie存储小型数据，可以设置过期时间，也支持跨域（通过配置domain）。适合存储小型持久化数据，比如用户token、记住登录状态。容量比较小，大约4KB。

完整可运行Demo（Vue2/Vue3通用）

适配场景：存储用户登录token、记住密码状态，跨页面共享，支持过期时间设置。

// 1. 封装Cookie工具（utils/cookie.js，通用）// 设置Cookie（支持过期时间、路径、域名）export const setCookie = (key, value, days = 7, path = '/', domain = '') => {  let cookieStr = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;  // 设置过期时间  if (days) {    const date = new Date();    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);    cookieStr += `;expires=${date.toUTCString()}`;  }  // 设置路径  if (path) cookieStr += `;path=${path}`;  // 设置域名（跨域时使用）  if (domain) cookieStr += `;domain=${domain}`;  // 写入Cookie  document.cookie = cookieStr;};// 获取Cookieexport const getCookie = (key) => {  const cookies = document.cookie.split('; ');  for (const cookie of cookies) {    const [k, v] = cookie.split('=');    if (k === encodeURIComponent(key)) {      return decodeURIComponent(v);    }  }  return '';};// 删除Cookieexport const removeCookie = (key, path = '/', domain = '') => {  // 设置过期时间为过去，实现删除  setCookie(key, '', -1, path, domain);};// 2. 页面A（设置Cookie，@/views/PageA.vue，Vue3示例）// 3. 页面B（读取Cookie，@/views/PageB.vue，Vue3示例）// Vue2 页面B示例

注意事项

• Cookie容量大约4KB，只适合存小型数据，比如token、用户ID；
• 默认会随着每次请求发送到后端，可以用于前后端共享数据（比如身份验证）；
• 敏感数据（比如token）建议加密后再存储，避免泄露。

七、窗口通信（window.postMessage，跨域/多窗口适配）

核心思路是通过window.postMessage方法，实现不同页面——甚至是跨域页面、多窗口——之间的通信。适合跨域页面和多窗口联动的场景，比如Vue页面与iframe页面通信、打开新窗口传值。

完整可运行Demo（分2种场景，Vue2/Vue3通用）

场景1：页面A打开新窗口（页面B），传递数据

// 页面A（打开新窗口，发送数据，@/views/PageA.vue，Vue3示例）// 页面B（新窗口，接收数据，@/views/PageB.vue，Vue3示例）// Vue2 页面B示例（@/views/PageB.vue）// 补充：页面A接收页面B返回数据（Vue3示例，添加到PageA的script中）// 场景2：Vue页面与iframe页面通信（跨域/同域通用）// 1. 页面A（包含iframe，发送数据，@/views/PageA.vue，Vue3示例）// 2. 页面B（iframe内嵌页面，接收/返回数据，@/views/PageB.vue，Vue3示例）// Vue2 iframe通信示例（页面B）