在嵌入式 Vue 应用程序中操作浏览器 URL

Question

我目前将 Vue 应用程序渲染为 Vue 应用程序。我通过将子应用的 index.html 文件嵌入到主应用的 div 容器中来实现这一点。

<template>
  <div id="customAppContainer"></div>
</template>

<script>
export default {
  mounted() {
    this.updateCustomAppContainer();
  },
  methods: {
    updateCustomAppContainer() {
      const fullRoute = this.$router.currentRoute.fullPath;
      const routeSegments = fullRoute.split("/");
      const appsIndex = routeSegments.indexOf("apps");
      const appKey = routeSegments[appsIndex + 1];

      document.getElementById(
        "customAppContainer"
      ).innerHTML = `<object style="width: 100%; height:100%;" data="http://localhost:3000/subApps/${appKey}"></object>`;
    }
  },
  watch: {
    $route(to, from) {
      this.updateCustomAppContainer();
    }
  }
};
</script>

如果你想了解更多，请看这里

mount Vue apps into container of main Vue app

以及我自己对这个问题的回答

https://stackoverflow.com/a/58265830/9945420

在customAppContainer 的object 标签内呈现的我的子应用有自己的路由，基本路由是

export default new Router({
    base: '/my-first-custom-app/',
    mode: 'history',
    routes: [
        {
            path: '/',
            component: PageOne,
        },
        {
            path: '/two',
            component: PageTwo,
        },
    ],
});

我可以浏览我的子应用并记录当前网址

<script>
export default {
  created() {
    console.log(this.$router.currentRoute.fullPath);
  }
};
</script>

在第一条路线上我得到/，在第二条路线上我得到/two。这是对的。但是在浏览子应用程序时，浏览器 URL 永远不会改变。调用localhost:3000/apps/my-first-custom-app/two 时，文件服务器为index.html 提供服务，但无法转发到/two。

是否可以转发到正确的路线？并在浏览子应用时操纵浏览器 URL？

---

更新：

我试图删除对象标签，因为它们似乎创建了一个黑盒。我在这里找到了另一种方法

https://stackoverflow.com/a/55209788/9945420

更新后的代码应该是

<template>
  <div id="customAppContainer"></div>
</template>

<script>
export default {
  async mounted() {
    await this.updateCustomAppContainer();
  },
  methods: {
    async updateCustomAppContainer() {
      const fullRoute = this.$router.currentRoute.fullPath;
      const routeSegments = fullRoute.split("/");
      const appsIndex = routeSegments.indexOf("apps");
      const appKey = routeSegments[appsIndex + 1];

      // document.getElementById(
      //   "customAppContainer"
      // ).innerHTML = `<object style="width: 100%; height:100%;" data="http://localhost:3000/subApps/${appKey}"></object>`;

      const response = await fetch(`http://localhost:3000/subApps/${appKey}`);
      const htmlContent = await response.text();
      document.getElementById("customAppContainer").innerHTML = htmlContent;
    }
  },
  watch: {
    async $route(to, from) {
      await this.updateCustomAppContainer();
    }
  }
};
</script>

此代码适用于纯 HTML 文件（无 Vue 应用程序），但当我想嵌入分布式 Vue 应用程序时，此应用程序不会呈现。

---

简约再现

我创建了一个用于复制的简约存储库。

https://github.com/byteCrunsher/temp-reproduction

开发目录包含静态文件服务器、应呈现 Vue 应用程序的基本 Vue 应用程序和应用程序本身。请记住，第一个应用程序是 Vue 应用程序，第二个应用程序只是一个基本的 HTML 文件。

生产目录包含文件服务器、分布式 Vue 应用程序和 html 文件。只需从生产目录运行静态文件服务器并转到http://localhost:3000，您应该会看到我当前的工作。

---

更新

当我使用 vue 指令 v-html 并将响应存储到数据属性 (https://hatebin.com/casjdcehrj) 时，我会从服务器收到此响应

这是我使用await response.text();时得到的内容

Answer 1

我自己解决了这个问题。我采取了IFrame/object标签的方式

document.getElementById(
    "customAppContainer"
  ).innerHTML = `<object style="width: 100%; height:100%;" data="http://localhost:3000/subApps/${appKey}"></object>`;

这种方式的缺点是将嵌入式应用程序与主应用程序隔离开来。但是可以通过 localStorage 进行通信。 subApp 使用

扩展了它的 router.js 文件

router.afterEach((to, from) => {
    localStorage.subAppRouteUpdate = to.path;
});

每当我浏览该嵌入式应用程序时都会触发此事件，并将更新的 url 存储到 localStorage。基础应用程序可以监听该存储更改。在 App.vue 中它添加了一个事件监听器并将 subApp url 附加到浏览器 url

<script>
export default {
  created() {
    window.addEventListener("storage", () => {
      const fullRoute = this.$router.currentRoute.fullPath;
      const routeSegments = fullRoute.split("/");
      const appsIndex = routeSegments.indexOf("apps");
      const newBaseUrlSegments = routeSegments.slice(0, appsIndex + 2);
      const newBaseUrl = newBaseUrlSegments.join("/");
      const subAppRoute = localStorage.subAppRouteUpdate;
      const updatedUrl = newBaseUrl.concat(subAppRoute);
      history.replaceState(null, null, updatedUrl);
    });
  }
};
</script>

通过这种方法，我目前能够浏览我的容器化子应用，并且仍然可以更新浏览器 url。