vue3 通过iframe引入的h5页面 如何从h5页面跳转到vue3的路由上

1、在 Vue 3 的主应用中创建一个全局函数，供 H5 页面调用。这个函数将执行 Vue 3 的路由跳转操作。

// main.js

import { createApp, getCurrentInstance } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.config.globalProperties.$navigateToRoute = (route) => {
  getCurrentInstance().appContext.config.globalProperties.$router.push(route);
};

app.use(router);
app.mount('#app');

// 在 Vue 3 主应用中，监听 `message` 事件，接收来自 H5 页面的消息。根据消息内容执行对应的路由跳转操作
window.addEventListener('message', (event) => { 
    const message = event.data; 
    if (message.type === 'NAVIGATE_TO_ROUTE') { 
        const route = message.route; router.push(route); 
    } 
});

2、在 H5 页面中，通过 window.parent 获取父窗口（即包含 Vue 3 的页面）的 window 对象。使用 postMessage 方法向父窗口发送消息，包含要跳转的路由信息

// h5 Page.js

const route = '/your-vue3-route'; // 要跳转的路由路径

const message = {
  type: 'NAVIGATE_TO_ROUTE',
  route: route,
};

window.parent.postMessage(message, '*');