Javascript 如何使用Vue同时显示不同的前端路由器视图

我有一个页面，这个页面中有三个iframe（我必须使用iframe），它们将同时显示。在这些iFrame中，我设置了来自SPA页面的url。例如：

  routes: [
    {
      path: '/',
      name: 'air',
      component: () => import('@/views/dashboard/index.vue'),
      children: [
        {
          path: '/top',
          name: 'airTop',
          component: () => import('@/views/dashboard/top.vue')
        },
        {
          path: '/left',
          name: 'airLeft',
          component: () => import('@/views/dashboard/left.vue')
        },
        {
          path: '/right',
          name: 'airRight',
          component: () => import('@/views/dashboard/right.vue')
        }
      ]
    }
  ]

当我在顶部iframe中更改一些值时，我发现左侧的值和右侧的值不会更改。我意识到不同的iframe将获得一个新的Vue实例，因此不会共享该值。

---

我的问题：是否有任何方法可以同时在不同的iframe中共享价值。使用sington？

你是对的。由于您正在加载相同的应用程序，但在不同的iFrame中，您将获得3个不同的Vue实例。我的建议是让iFrame发出它所在的当前路由，并让本地应用程序控制其他iFrame的位置。@CENT1PEDE您能给我提供更多详细信息吗？这些iFrame似乎将托管在同一个站点上，对吗？如果是这样，您可以利用postMessage事件。这将允许左/右iFrame侦听从顶部iFrame发出的postMessage事件，该事件将接受一个值，并基于该值执行一个函数，该函数可以更新存储，并作为回报更新左/右iFrame的计算值。MDN postMessage页面供参考：@CENT1PEDE感谢您耐心的回复。这些iFrame确实在同一个站点上。这是观看postMessage并在当前页面中更新商店的一个很好的灵感！你是对的。由于您正在加载相同的应用程序，但在不同的iFrame中，您将获得3个不同的Vue实例。我的建议是让iFrame发出它所在的当前路由，并让本地应用程序控制其他iFrame的位置。@CENT1PEDE您能给我提供更多详细信息吗？这些iFrame似乎将托管在同一个站点上，对吗？如果是这样，您可以利用postMessage事件。这将允许左/右iFrame侦听从顶部iFrame发出的postMessage事件，该事件将接受一个值，并基于该值执行一个函数，该函数可以更新存储，并作为回报更新左/右iFrame的计算值。MDN postMessage页面供参考：@CENT1PEDE感谢您耐心的回复。这些iFrame确实在同一个站点上。这是观看postMessage并在当前页面中更新商店的一个很好的灵感！