Vue3实现跨页面传值的几种常见方法

// 跳转并传递路由参数
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
router.push({ name: 'TargetPage', params: { id: someValue } });

// 接收路由参数
const route = useRoute();
const receivedId = route.params.id;

// 跳转并传递查询参数
import { useRouter } from 'vue-router';

const router = useRouter();
router.push({ path: '/target', query: { inputInt: someValue } });

// 接收查询参数
import { useRoute } from 'vue-router';

const route = useRoute();
const receivedInputInt = route.query.inputInt;

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    sharedData: null,
  },
  mutations: {
    setSharedData(state, data) {
      state.sharedData = data;
    },
  },
});

// 发送端页面
import { useStore } from 'vuex';

const store = useStore();
store.commit('setSharedData', someValue);

// 接收端页面
import { useStore } from 'vuex';

const store = useStore();
const sharedData = store.state.sharedData;

// 存储数据
localStorage.setItem('sharedDataKey', JSON.stringify(someValue));

// 读取数据
const storedData = JSON.parse(localStorage.getItem('sharedDataKey'));

// 创建广播通道
const channel = new BroadcastChannel('my-channel');

// 发送消息
channel.postMessage(someValue);

// 创建广播通道
const channel = new BroadcastChannel('my-channel');

// 监听消息
channel.onmessage = function(event) {
  const receivedValue = event.data;
  // 处理接收到的数据
};

// 向目标窗口发送消息
window.opener.postMessage({ data: someValue }, '*');

// 监听`message`事件
window.addEventListener('message', function(event) {
  if (event.origin === expectedOrigin) {
    const receivedValue = event.data.data;
    // 处理接收到的数据
  }
}, false);