在嵌入式Vue应用中操纵浏览器网址

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>

如果您想了解更多信息，请在这里看看

将Vue应用安装到主Vue应用的容器中

我对这个问题的回答

/sf/answers/4078608131/

我的子应用在的object标记中呈现，customAppContainer具有自己的路线，基本路线是

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？

---

更新：

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

/sf/answers/3864685191/

更新后的代码应为

<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();