// 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（跳轉(zhuǎn)方，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（query參數(shù)跳轉(zhuǎn)）</h3>
    <!-- 方式1：router-link跳轉(zhuǎn) -->
    <router-link 
      :to="{ path: '/pageB', query: { id: 123, name: 'Vue跨頁面通信Demo' } }"
      class="btn"
    >
      點(diǎn)擊跳轉(zhuǎn)頁面B（router-link）
    </router-link>
    <!-- 方式2：編程式導(dǎo)航跳轉(zhuǎn) -->
    <button @click="goToPageB" class="btn">點(diǎn)擊跳轉(zhuǎn)頁面B（編程式）</button>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
// 編程式導(dǎo)航
const router = useRouter();
const goToPageB = () => {
  router.push({
    path: '/pageB',
    query: { id: 123, name: 'Vue跨頁面通信Demo' }
  });
};
</script>
<style scoped>
.btn { margin: 0 10px; padding: 6px 12px; cursor: pointer; }
</style>
// 3. 頁面B（接收方，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（接收query參數(shù)）</h3>
    <div>接收的ID：{{ id }}</div>
    <div>接收的名稱：{{ name }}</div>
    <!-- 返回頁面A -->
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { ref } from 'vue';
const route = useRoute();
// 接收參數(shù)（query參數(shù)默認(rèn)是字符串，需手動(dòng)轉(zhuǎn)類型）
const id = ref(Number(route.query.id));
const name = ref(route.query.name);
// 監(jiān)聽路由變化（若頁面不刷新，參數(shù)變化時(shí)同步更新）
watch(
  () => route.query,
  (newQuery) => {
    id.value = Number(newQuery.id);
    name.value = newQuery.name;
  },
  { immediate: true }
);
</script>
// 4. main.js（入口文件）
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');

// 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（跳轉(zhuǎn)方，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（query參數(shù)跳轉(zhuǎn)）</h3>
    <router-link 
      :to="{ path: '/pageB', query: { id: 123, name: 'Vue跨頁面通信Demo' } }"
      class="btn"
    >
      點(diǎn)擊跳轉(zhuǎn)頁面B（router-link）
    </router-link>
    <button @click="goToPageB" class="btn">點(diǎn)擊跳轉(zhuǎn)頁面B（編程式）</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToPageB() {
      this.$router.push({
        path: '/pageB',
        query: { id: 123, name: 'Vue跨頁面通信Demo' }
      });
    }
  }
};
</script>

// 3. 頁面B（接收方，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（接收query參數(shù)）</h3>
    <div>接收的ID：{{ id }}</div>
    <div>接收的名稱：{{ name }}</div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: ''
    };
  },
  mounted() {
    // 初始接收參數(shù)
    this.id = Number(this.$route.query.id);
    this.name = this.$route.query.name;
  },
  watch: {
    // 監(jiān)聽路由變化，同步更新參數(shù)
    '$route.query': {
      handler(newQuery) {
        this.id = Number(newQuery.id);
        this.name = newQuery.name;
      },
      immediate: true
    }
  }
};
</script>

// 4. main.js（入口文件）
import Vue from 'vue';
import App from './App';
import router from './router';

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

// 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（與傳遞的參數(shù)名一致）
  { path: '/pageB/:id/:name', name: 'PageB', component: PageB }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

// 2. 頁面A（跳轉(zhuǎn)方，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（params參數(shù)跳轉(zhuǎn)）</h3>
    <!-- 注意：params參數(shù)必須用name跳轉(zhuǎn)，不能用path -->
    <button @click="goToPageB" class="btn">點(diǎn)擊跳轉(zhuǎn)頁面B</button>
  </div>
</template>

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

const router = useRouter();
const goToPageB = () => {
  router.push({
    name: 'PageB', // 必須用name
    params: { id: 456, name: '敏感數(shù)據(jù)Demo' } // 傳遞params參數(shù)
  });
};
</script>

// 3. 頁面B（接收方，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（接收params參數(shù)）</h3>
    <div>接收的ID：{{ id }}</div>
    <div>接收的敏感名稱：{{ name }}</div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue';

const route = useRoute();
const id = ref(Number(route.params.id));
const name = ref(route.params.name);

// 監(jiān)聽路由變化，同步更新參數(shù)
watch(
  () => route.params,
  (newParams) => {
    id.value = Number(newParams.id);
    name.value = newParams.name;
  },
  { immediate: true }
);
</script>

// 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（跳轉(zhuǎn)方，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（params參數(shù)跳轉(zhuǎn)）</h3>
    <button @click="goToPageB" class="btn">點(diǎn)擊跳轉(zhuǎn)頁面B</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToPageB() {
      this.$router.push({
        name: 'PageB',
        params: { id: 456, name: '敏感數(shù)據(jù)Demo' }
      });
    }
  }
};
</script>

// 3. 頁面B（接收方，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（接收params參數(shù)）</h3>
    <div>接收的ID：{{ id }}</div>
    <div>接收的敏感名稱：{{ name }}</div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: ''
    };
  },
  mounted() {
    this.id = Number(this.$route.params.id);
    this.name = this.$route.params.name;
  },
  watch: {
    '$route.params': {
      handler(newParams) {
        this.id = Number(newParams.id);
        this.name = newParams.name;
      },
      immediate: true
    }
  }
};
</script>

// 1. 創(chuàng)建Pinia實(shí)例并注冊(cè)（main.js）
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia'; // 引入Pinia
import router from './router';

const app = createApp(App);
app.use(createPinia()); // 注冊(cè)Pinia
app.use(router);
app.mount('#app');

// 2. 創(chuàng)建全局倉庫（store/modules/user.js）
import { defineStore } from 'pinia';

// 定義倉庫（user為倉庫唯一標(biāo)識(shí)）
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: { id: 1, name: '測(cè)試用戶', age: 20 }, // 全局共享數(shù)據(jù)
    count: 0 // 全局計(jì)數(shù)器（用于跨頁面聯(lián)動(dòng)）
  }),
  actions: {
    // 修改用戶信息
    setUserInfo(info) {
      this.userInfo = info;
    },
    // 增加計(jì)數(shù)器
    addCount() {
      this.count++;
    },
    // 重置計(jì)數(shù)器
    resetCount() {
      this.count = 0;
    }
  }
});

// 3. 頁面A（修改全局?jǐn)?shù)據(jù)，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（修改Pinia全局?jǐn)?shù)據(jù)）</h3>
    <div>當(dāng)前全局計(jì)數(shù)器：{{ userStore.count }}</div>
    <button @click="userStore.addCount" class="btn">計(jì)數(shù)器+1</button>
    <button @click="updateUserInfo" class="btn">修改用戶信息</button>
    <router-link to="/pageB" class="btn">跳轉(zhuǎn)到頁面B查看數(shù)據(jù)</router-link>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user';

// 引入并使用倉庫
const userStore = useUserStore();

// 修改用戶信息
const updateUserInfo = () => {
  userStore.setUserInfo({
    id: 2,
    name: '新用戶',
    age: 22
  });
};
</script>

// 4. 頁面B（讀取/修改全局?jǐn)?shù)據(jù)，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（讀取Pinia全局?jǐn)?shù)據(jù)）</h3>
    <div>用戶ID：{{ userStore.userInfo.id }}</div>
    <div>用戶名：{{ userStore.userInfo.name }}</div>
    <div>當(dāng)前全局計(jì)數(shù)器：{{ userStore.count }}</div>
    <button @click="userStore.addCount" class="btn">計(jì)數(shù)器+1</button>
    <button @click="userStore.resetCount" class="btn">重置計(jì)數(shù)器</button>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();
</script>

// 1. 創(chuàng)建Vuex倉庫并注冊(cè)（main.js）
import Vue from 'vue';
import App from './App';
import router from './router';
import Vuex from 'vuex'; // 引入Vuex
import store from './store'; // 引入倉庫

Vue.use(Vuex); // 注冊(cè)Vuex

new Vue({
  el: '#app',
  router,
  store, // 注入倉庫
  components: { App },
  template: '<App/>'
});

// 2. 創(chuàng)建全局倉庫（store/index.js）
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userInfo: { id: 1, name: '測(cè)試用戶', age: 20 },
    count: 0
  },
  mutations: {
    // 同步修改狀態(tài)（必須通過mutation修改state）
    setUserInfo(state, info) {
      state.userInfo = info;
    },
    addCount(state) {
      state.count++;
    },
    resetCount(state) {
      state.count = 0;
    }
  },
  actions: {
    // 異步修改狀態(tài)（如接口請(qǐng)求后修改）
    addCountAsync({ commit }) {
      setTimeout(() => {
        commit('addCount'); // 調(diào)用mutation修改state
      }, 1000);
    }
  },
  getters: {
    // 計(jì)算屬性（簡化數(shù)據(jù)讀?。?
    userName: state => state.userInfo.name
  }
});

// 3. 頁面A（修改全局?jǐn)?shù)據(jù)，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（修改Vuex全局?jǐn)?shù)據(jù)）</h3>
    <div>當(dāng)前全局計(jì)數(shù)器：{{ $store.state.count }}</div>
    <div>用戶名：{{ $store.getters.userName }}</div>
    <button @click="$store.commit('addCount')" class="btn">計(jì)數(shù)器+1（同步）</button>
    <button @click="$store.dispatch('addCountAsync')" class="btn">計(jì)數(shù)器+1（異步）</button>
    <button @click="updateUserInfo" class="btn">修改用戶信息</button>
    <router-link to="/pageB" class="btn">跳轉(zhuǎn)到頁面B查看數(shù)據(jù)</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    updateUserInfo() {
      // 調(diào)用mutation修改用戶信息
      this.$store.commit('setUserInfo', {
        id: 2,
        name: '新用戶',
        age: 22
      });
    }
  }
};
</script>

// 4. 頁面B（讀取/修改全局?jǐn)?shù)據(jù)，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（讀取Vuex全局?jǐn)?shù)據(jù)）</h3>
    <div>用戶ID：{{ $store.state.userInfo.id }}</div>
    <div>用戶名：{{ $store.getters.userName }}</div>
    <div>當(dāng)前全局計(jì)數(shù)器：{{ $store.state.count }}</div>
    <button @click="$store.commit('addCount')" class="btn">計(jì)數(shù)器+1</button>
    <button @click="$store.commit('resetCount')" class="btn">重置計(jì)數(shù)器</button>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script>
export default {};
</script>

// 1. 封裝本地存儲(chǔ)工具（utils/storage.js，簡化版，通用）
// 存儲(chǔ)localStorage（永久存儲(chǔ)）
export const setLocal = (key, value) => {
  // 處理對(duì)象/數(shù)組，轉(zhuǎn)為字符串
  const val = typeof value === 'object' ? JSON.stringify(value) : value;
  localStorage.setItem(key, val);
};

// 獲取localStorage
export const getLocal = (key) => {
  const val = localStorage.getItem(key);
  try {
    // 嘗試解析為對(duì)象/數(shù)組
    return JSON.parse(val);
  } catch (e) {
    // 解析失敗，返回原始字符串
    return val;
  }
};

// 刪除localStorage
export const removeLocal = (key) => {
  localStorage.removeItem(key);
};

// 存儲(chǔ)sessionStorage（會(huì)話存儲(chǔ)）
export const setSession = (key, value) => {
  const val = typeof value === 'object' ? JSON.stringify(value) : value;
  sessionStorage.setItem(key, val);
};

// 獲取sessionStorage
export const getSession = (key) => {
  const val = sessionStorage.getItem(key);
  try {
    return JSON.parse(val);
  } catch (e) {
    return val;
  }
};

// 2. 頁面A（存儲(chǔ)數(shù)據(jù)，@/views/PageA.vue，Vue3示例，Vue2用法類似）
<template>
  <div class="page-a">
    <h3>頁面A（存儲(chǔ)本地?cái)?shù)據(jù)）</h3>
    <button @click="saveLocalData" class="btn">存儲(chǔ)永久數(shù)據(jù)（localStorage）</button>
    <button @click="saveSessionData" class="btn">存儲(chǔ)臨時(shí)數(shù)據(jù)（sessionStorage）</button>
    <button @click="removeLocal('userInfo')" class="btn">刪除永久數(shù)據(jù)</button>
    <router-link to="/pageB" class="btn">跳轉(zhuǎn)到頁面B讀取數(shù)據(jù)</router-link>
  </div>
</template>

<script setup>
import { setLocal, setSession, removeLocal } from '@/utils/storage';

// 存儲(chǔ)永久數(shù)據(jù)（刷新頁面不丟失，除非手動(dòng)刪除）
const saveLocalData = () => {
  setLocal('userInfo', { id: 1, name: '測(cè)試用戶', remember: true });
  alert('永久數(shù)據(jù)存儲(chǔ)成功！');
};

// 存儲(chǔ)臨時(shí)數(shù)據(jù)（關(guān)閉標(biāo)簽頁/瀏覽器后丟失）
const saveSessionData = () => {
  setSession('tempData', '臨時(shí)測(cè)試數(shù)據(jù)123');
  alert('臨時(shí)數(shù)據(jù)存儲(chǔ)成功！');
};
</script>

// 3. 頁面B（讀取數(shù)據(jù)，@/views/PageB.vue，Vue3示例）
<template>
  <div class="page-b">
    <h3>頁面B（讀取本地?cái)?shù)據(jù)）</h3>
    <div>永久數(shù)據(jù)（localStorage）：{{ userInfo }}</div>
    <div>臨時(shí)數(shù)據(jù)（sessionStorage）：{{ tempData }}</div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getLocal, getSession } from '@/utils/storage';

const userInfo = ref({});
const tempData = ref('');

// 頁面掛載時(shí)讀取數(shù)據(jù)
onMounted(() => {
  userInfo.value = getLocal('userInfo') || {};
  tempData.value = getSession('tempData') || '暫無臨時(shí)數(shù)據(jù)';
});
</script>

// Vue2 頁面B示例（@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（讀取本地?cái)?shù)據(jù)）</h3>
    <div>永久數(shù)據(jù)（localStorage）：{{ userInfo }}</div>
    <div>臨時(shí)數(shù)據(jù)（sessionStorage）：{{ tempData }}</div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script>
import { getLocal, getSession } from '@/utils/storage';

export default {
  data() {
    return {
      userInfo: {},
      tempData: ''
    };
  },
  mounted() {
    this.userInfo = getLocal('userInfo') || {};
    this.tempData = getSession('tempData') || '暫無臨時(shí)數(shù)據(jù)';
  }
};
</script>

// 1. 創(chuàng)建事件總線（utils/eventBus.js）
import { ref } from 'vue';

// 定義總線容器
const bus = ref({});

// 觸發(fā)事件（發(fā)送數(shù)據(jù)）
export const emitEvent = (eventName, data) => {
  // 若有監(jiān)聽該事件的回調(diào)，執(zhí)行并傳遞數(shù)據(jù)
  bus.value[eventName]?.(data);
};

// 監(jiān)聽事件（接收數(shù)據(jù)）
export const onEvent = (eventName, callback) => {
  // 注冊(cè)回調(diào)函數(shù)
  bus.value[eventName] = callback;
};

// 取消監(jiān)聽（避免內(nèi)存泄漏）
export const offEvent = (eventName) => {
  // 刪除事件回調(diào)
  delete bus.value[eventName];
};

// 2. 頁面A（觸發(fā)事件，發(fā)送數(shù)據(jù)，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（EventBus發(fā)送數(shù)據(jù)）</h3>
    <input v-model="message" placeholder="請(qǐng)輸入要傳遞的內(nèi)容" />
    <button @click="sendData" class="btn">發(fā)送數(shù)據(jù)到頁面B</button>
    <router-link to="/pageB" class="btn">跳轉(zhuǎn)到頁面B</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { emitEvent } from '@/utils/eventBus';

const message = ref('');

// 觸發(fā)事件，傳遞數(shù)據(jù)
const sendData = () => {
  if (!message.value) {
    alert('請(qǐng)輸入內(nèi)容');
    return;
  }
  emitEvent('sendData', { message: message.value, time: new Date().toLocaleString() });
  message.value = '';
  alert('數(shù)據(jù)發(fā)送成功！');
};
</script>

// 3. 頁面B（監(jiān)聽事件，接收數(shù)據(jù)，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（EventBus接收數(shù)據(jù)）</h3>
    <div class="data-list">
      <div v-for="(item, index) in dataList" :key="index">
        {{ item.time }}：{{ item.message }}
      </div>
      <div v-if="dataList.length === 0">暫無數(shù)據(jù)</div>
    </div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { onEvent, offEvent } from '@/utils/eventBus';

const dataList = ref([]);

onMounted(() => {
  // 監(jiān)聽事件，接收數(shù)據(jù)
  onEvent('sendData', (data) => {
    dataList.value.push(data);
  });
});

onUnmounted(() => {
  // 組件銷毀時(shí)取消監(jiān)聽，避免內(nèi)存泄漏
  offEvent('sendData');
});
</script>

<style scoped>
.data-list { margin: 20px 0; padding: 10px; border: 1px solid #eee; }
.data-list div { margin: 5px 0; }
</style>

// 1. 注冊(cè)全局EventBus（main.js）
import Vue from 'vue';
import App from './App';
import router from './router';

// 注冊(cè)全局總線（掛載到Vue原型上）
Vue.prototype.$bus = new Vue();

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

// 2. 頁面A（觸發(fā)事件，發(fā)送數(shù)據(jù)，@/views/PageA.vue）
<template>
  <div class="page-a">
    <h3>頁面A（EventBus發(fā)送數(shù)據(jù)）</h3>
    <input v-model="message" placeholder="請(qǐng)輸入要傳遞的內(nèi)容" />
    <button @click="sendData" class="btn">發(fā)送數(shù)據(jù)到頁面B</button>
    <router-link to="/pageB" class="btn">跳轉(zhuǎn)到頁面B</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendData() {
      if (!this.message) {
        alert('請(qǐng)輸入內(nèi)容');
        return;
      }
      // 觸發(fā)全局事件，傳遞數(shù)據(jù)
      this.$bus.$emit('sendData', {
        message: this.message,
        time: new Date().toLocaleString()
      });
      this.message = '';
      alert('數(shù)據(jù)發(fā)送成功！');
    }
  }
};
</script>

// 3. 頁面B（監(jiān)聽事件，接收數(shù)據(jù)，@/views/PageB.vue）
<template>
  <div class="page-b">
    <h3>頁面B（EventBus接收數(shù)據(jù)）</h3>
    <div class="data-list">
      <div v-for="(item, index) in dataList" :key="index">
        {{ item.time }}：{{ item.message }}
      </div>
      <div v-if="dataList.length === 0">暫無數(shù)據(jù)</div>
    </div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    };
  },
  mounted() {
    // 監(jiān)聽全局事件
    this.$bus.$on('sendData', (data) => {
      this.dataList.push(data);
    });
  },
  beforeDestroy() {
    // 組件銷毀時(shí)取消監(jiān)聽，避免內(nèi)存泄漏
    this.$bus.$off('sendData');
  }
};
</script>

// 1. 封裝本地存儲(chǔ)工具（utils/storage.js，同上文，可直接復(fù)用）
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（修改本地存儲(chǔ)，觸發(fā)變化，@/views/PageA.vue，Vue3示例）
<template>
  <div class="page-a">
    <h3>頁面A（修改本地存儲(chǔ)）</h3>
    <button @click="updateCount" class="btn">修改全局計(jì)數(shù)（localStorage）</button>
    <div>當(dāng)前計(jì)數(shù)：{{ count }}</div>
    <router-link to="/pageB" class="btn">跳轉(zhuǎn)到頁面B（自動(dòng)同步）</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { setLocal, getLocal } from '@/utils/storage';

const count = ref(0);

// 頁面掛載時(shí)讀取當(dāng)前計(jì)數(shù)
onMounted(() => {
  count.value = getLocal('count') || 0;
});

// 修改本地存儲(chǔ)的計(jì)數(shù)（觸發(fā)storage事件）
const updateCount = () => {
  count.value++;
  setLocal('count', count.value);
};
</script>

// 3. 頁面B（監(jiān)聽本地存儲(chǔ)變化，自動(dòng)更新，@/views/PageB.vue，Vue3示例）
<template>
  <div class="page-b">
    <h3>頁面B（監(jiān)聽本地存儲(chǔ)變化）</h3>
    <div>同步的計(jì)數(shù)：{{ count }}</div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { getLocal } from '@/utils/storage';

const count = ref(0);

// 監(jiān)聽storage事件
const handleStorageChange = (e) => {
  // 判斷是否是我們關(guān)注的key
  if (e.key === 'count') {
    count.value = Number(e.newValue);
  }
};

onMounted(() => {
  // 初始讀取計(jì)數(shù)
  count.value = getLocal('count') || 0;
  // 注冊(cè)storage監(jiān)聽
  window.addEventListener('storage', handleStorageChange);
});

onUnmounted(() => {
  // 取消監(jiān)聽，避免內(nèi)存泄漏
  window.removeEventListener('storage', handleStorageChange);
});
</script>

// Vue2 頁面B示例
<script>
import { getLocal } from '@/utils/storage';

export default {
  data() {
    return { count: 0 };
  },
  mounted() {
    this.count = getLocal('count') || 0;
    window.addEventListener('storage', this.handleStorageChange);
  },
  beforeDestroy() {
    window.removeEventListener('storage', this.handleStorageChange);
  },
  methods: {
    handleStorageChange(e) {
      if (e.key === 'count') {
        this.count = Number(e.newValue);
      }
    }
  }
};
</script>

// 1. 封裝Cookie工具（utils/cookie.js，通用）
// 設(shè)置Cookie（支持過期時(shí)間、路徑、域名）
export const setCookie = (key, value, days = 7, path = '/', domain = '') => {
  let cookieStr = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
  // 設(shè)置過期時(shí)間
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    cookieStr += `;expires=${date.toUTCString()}`;
  }
  // 設(shè)置路徑
  if (path) cookieStr += `;path=${path}`;
  // 設(shè)置域名（跨域時(shí)使用）
  if (domain) cookieStr += `;domain=${domain}`;
  // 寫入Cookie
  document.cookie = cookieStr;
};

// 獲取Cookie
export 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 '';
};

// 刪除Cookie
export const removeCookie = (key, path = '/', domain = '') => {
  // 設(shè)置過期時(shí)間為過去，實(shí)現(xiàn)刪除
  setCookie(key, '', -1, path, domain);
};

// 2. 頁面A（設(shè)置Cookie，@/views/PageA.vue，Vue3示例）
<template>
  <div class="page-a">
    <h3>頁面A（設(shè)置Cookie）</h3>
    <div>
      <label>記住密碼：</label>
      <input type="checkbox" v-model="remember" />
    </div>
    <button @click="login" class="btn">模擬登錄（設(shè)置Cookie）</button>
    <button @click="removeCookie('token')" class="btn">刪除token</button>
    <router-link to="/pageB" class="btn">跳轉(zhuǎn)到頁面B讀取Cookie</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { setCookie, removeCookie } from '@/utils/cookie';

const remember = ref(false);

// 模擬登錄，設(shè)置Cookie
const login = () => {
  const token = 'abc123456789'; // 模擬后端返回的token
  // 記住密碼：保存7天；不記?。翰辉O(shè)置過期時(shí)間（會(huì)話結(jié)束后失效）
  setCookie('token', token, remember.value ? 7 : 0);
  alert('登錄成功，Cookie已設(shè)置！');
};
</script>

// 3. 頁面B（讀取Cookie，@/views/PageB.vue，Vue3示例）
<template>
  <div class="page-b">
    <h3>頁面B（讀取Cookie）</h3>
    <div>當(dāng)前登錄token：{{ token }}</div>
    <div v-if="!token">未獲取到token（Cookie已過期或未設(shè)置）</div>
    <router-link to="/pageA" class="btn">返回頁面A</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getCookie } from '@/utils/cookie';

const token = ref('');

// 頁面掛載時(shí)讀取Cookie
onMounted(() => {
  token.value = getCookie('token');
});
</script>

// Vue2 頁面B示例
<script>
import { getCookie } from '@/utils/cookie';

export default {
  data() {
    return { token: '' };
  },
  mounted() {
    this.token = getCookie('token');
  }
};
</script>

// 頁面A（打開新窗口，發(fā)送數(shù)據(jù)，@/views/PageA.vue，Vue3示例）
<template>
  <div class="page-a">
    <h3>頁面A（打開新窗口傳值）</h3>
    <button @click="openPageB" class="btn">打開頁面B并傳遞數(shù)據(jù)</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 存儲(chǔ)新窗口實(shí)例
const pageB = ref(null);

// 打開頁面B并發(fā)送數(shù)據(jù)
const openPageB = () => {
  // 打開新窗口（同域場(chǎng)景，路徑為頁面B的路由）
  pageB.value = window.open('/pageB', '_blank');
  
  // 確保頁面B加載完成后發(fā)送數(shù)據(jù)（避免接收不到）
  setTimeout(() => {
    // 發(fā)送數(shù)據(jù)：第一個(gè)參數(shù)是數(shù)據(jù)，第二個(gè)參數(shù)是目標(biāo)域名（*表示允許所有，生產(chǎn)環(huán)境需指定具體域名）
    pageB.value.postMessage(
      { type: 'init', data: { id: 123, name: '窗口通信Demo' } },
      'http://localhost:8080' // 生產(chǎn)環(huán)境替換為實(shí)際域名
    );
  }, 1000);
};
</script>

// 頁面B（新窗口，接收數(shù)據(jù)，@/views/PageB.vue，Vue3示例）
<template>
  <div class="page-b">
    <h3>頁面B（新窗口接收數(shù)據(jù)）</h3>
    <div v-if="receivedData">
      <div>接收的數(shù)據(jù)類型：{{ receivedData.type }}</div>
      <div>接收的ID：{{ receivedData.data.id }}</div>
      <div>接收的名稱：{{ receivedData.data.name }}</div>
    </div>
    <div v-else>暫無數(shù)據(jù)接收</div>
    <button @click="sendBackData" class="btn">向頁面A返回?cái)?shù)據(jù)</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const receivedData = ref(null);

// 接收頁面A發(fā)送的數(shù)據(jù)
const handleMessage = (e) => {
  // 安全校驗(yàn)：只接收指定域名的消息（生產(chǎn)環(huán)境必加，防止惡意消息）
  if (e.origin !== 'http://localhost:8080') return;
  // 接收數(shù)據(jù)并賦值
  receivedData.value = e.data;
};

// 向頁面A返回?cái)?shù)據(jù)
const sendBackData = () => {
  if (!receivedData.value) {
    alert('未接收任何數(shù)據(jù)，無法返回');
    return;
  }
  // 通過opener獲取父窗口（頁面A），發(fā)送返回?cái)?shù)據(jù)
  window.opener.postMessage(
    { type: 'reply', data: '已成功接收數(shù)據(jù)，感謝發(fā)送！' },
    'http://localhost:8080'
  );
  alert('返回?cái)?shù)據(jù)已發(fā)送給頁面A');
};

onMounted(() => {
  // 注冊(cè)message監(jiān)聽
  window.addEventListener('message', handleMessage);
});

onUnmounted(() => {
  // 取消監(jiān)聽，避免內(nèi)存泄漏
  window.removeEventListener('message', handleMessage);
});
</script>

// Vue2 頁面B示例（@/views/PageB.vue）
<script>
export default {
  data() {
    return {
      receivedData: null
    };
  },
  mounted() {
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(e) {
      if (e.origin !== 'http://localhost:8080') return;
      this.receivedData = e.data;
    },
    sendBackData() {
      if (!this.receivedData) {
        alert('未接收任何數(shù)據(jù)，無法返回');
        return;
      }
      window.opener.postMessage(
        { type: 'reply', data: '已成功接收數(shù)據(jù)，感謝發(fā)送！' },
        'http://localhost:8080'
      );
      alert('返回?cái)?shù)據(jù)已發(fā)送給頁面A');
    }
  }
};
</script>

// 補(bǔ)充：頁面A接收頁面B返回?cái)?shù)據(jù)（Vue3示例，添加到PageA的script中）
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const pageB = ref(null);
const replyData = ref('');

// 接收頁面B返回的數(shù)據(jù)
const handleReply = (e) => {
  if (e.origin !== 'http://localhost:8080') return;
  replyData.value = e.data.data;
  alert(`收到頁面B返回：${replyData.value}`);
};

const openPageB = () => {
  pageB.value = window.open('/pageB', '_blank');
  setTimeout(() => {
    pageB.value.postMessage(
      { type: 'init', data: { id: 123, name: '窗口通信Demo' } },
      'http://localhost:8080'
    );
  }, 1000);
};

onMounted(() => {
  window.addEventListener('message', handleReply);
});

onUnmounted(() => {
  window.removeEventListener('message', handleReply);
});
</script>

// 場(chǎng)景2：Vue頁面與iframe頁面通信（跨域/同域通用）
// 1. 頁面A（包含iframe，發(fā)送數(shù)據(jù)，@/views/PageA.vue，Vue3示例）
<template>
  <div class="page-a">
    <h3>頁面A（iframe通信）</h3>
    <!-- iframe嵌入頁面B（可跨域，如https://xxx.com/pageB） -->
    <iframe
      ref="iframeRef"
      src="http://localhost:8080/pageB" // 替換為實(shí)際iframe地址
      width="800"
      height="400"
    ></iframe>
    <button @click="sendToIframe" class="btn" style="margin-top: 20px;">向iframe發(fā)送數(shù)據(jù)</button>
    <div>iframe返回?cái)?shù)據(jù)：{{ iframeReply }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const iframeRef = ref(null);
const iframeReply = ref('');

// 向iframe發(fā)送數(shù)據(jù)
const sendToIframe = () => {
  if (!iframeRef.value) return;
  // 獲取iframe的window對(duì)象，發(fā)送數(shù)據(jù)
  iframeRef.value.contentWindow.postMessage(
    { type: 'iframeData', data: '來自Vue頁面的iframe通信數(shù)據(jù)' },
    'http://localhost:8080' // 跨域時(shí)填寫iframe的實(shí)際域名
  );
};

// 接收iframe返回的數(shù)據(jù)
const handleIframeReply = (e) => {
  if (e.origin !== 'http://localhost:8080') return;
  iframeReply.value = e.data.data;
};

onMounted(() => {
  window.addEventListener('message', handleIframeReply);
  // 等待iframe加載完成（可選，確保通信穩(wěn)定）
  iframeRef.value.onload = () => {
    console.log('iframe加載完成，可開始通信');
  };
});

onUnmounted(() => {
  window.removeEventListener('message', handleIframeReply);
});
</script>

// 2. 頁面B（iframe內(nèi)嵌頁面，接收/返回?cái)?shù)據(jù)，@/views/PageB.vue，Vue3示例）
<template>
  <div class="page-b">
    <h3>iframe內(nèi)嵌頁面（接收數(shù)據(jù)）</h3>
    <div>接收的iframe數(shù)據(jù)：{{ iframeData }}</div>
    <button @click="replyToParent" class="btn">向父頁面返回?cái)?shù)據(jù)</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const iframeData = ref('暫無數(shù)據(jù)');

// 接收父頁面（頁面A）發(fā)送的數(shù)據(jù)
const handleParentMessage = (e) => {
  // 安全校驗(yàn)，僅接收指定域名的消息
  if (e.origin !== 'http://localhost:8080') return;
  iframeData.value = e.data.data;
};

// 向父頁面返回?cái)?shù)據(jù)
const replyToParent = () => {
  // 通過parent獲取父窗口，發(fā)送返回?cái)?shù)據(jù)
  window.parent.postMessage(
    { type: 'iframeReply', data: '已接收iframe數(shù)據(jù)，返回確認(rèn)！' },
    'http://localhost:8080'
  );
};

onMounted(() => {
  window.addEventListener('message', handleParentMessage);
});

onUnmounted(() => {
  window.removeEventListener('message', handleParentMessage);
});
</script>

// Vue2 iframe通信示例（頁面B）
<script>
export default {
  data() {
    return {
      iframeData: '暫無數(shù)據(jù)'
    };
  },
  mounted() {
    window.addEventListener('message', this.handleParentMessage);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleParentMessage);
  },
  methods: {
    handleParentMessage(e) {
      if (e.origin !== 'http://localhost:8080') return;
      this.iframeData = e.data.data;
    },
    replyToParent() {
      window.parent.postMessage(
        { type: 'iframeReply', data: '已接收iframe數(shù)據(jù)，返回確認(rèn)！' },
        'http://localhost:8080'
      );
    }
  }
};
</script>