在 VueJs 应用程序中使用 Angular6 应用程序

Using Angular6 application inside VueJs application

我们有 Angular 应用程序(版本 6.1.5),它向 Restfull API 发出 HTTP 请求。

我们在 Angular App 中使用了模块化方法。有应用级路由配置,每个模块都有自己的路由配置。

这个设置非常好,运行没有任何麻烦。

现在根据我们的新要求,我们需要将此 Angular 应用程序与 VueJS 应用程序一起使用。

经过初步研究,我们使用了 Angular 个元素并创建了 angular 个构建。我们将此构建(包含 JS 和 CSS 文件)与 VueJS 一起使用,我们认为它运行良好,直到我们在 VueJS 应用程序上点击刷新。

点击刷新后,Angular 应用程序路由无法正常工作,我们只能看到空白屏幕。

所以我们想知道的是,我们使用 angular 元素的方法是否正确。或者是否有更好的方法在 VueJS 应用程序中使用 angular 应用程序。

感谢您的帮助。

大概 none 对原始问题的评论者熟悉 Web Components (of which Angular Element uses). Using multiple frameworks in combination with isolated web components is a perfectly normal and accepted practice。事实上,它很可能会变得更受欢迎。

无论如何,这里的实际问题是路由库的根本不兼容。因为路由与地址栏和 HTML 5 历史记录 API 紧密相关,所以子组件(无论是任何框架还是 Web 组件)都不能简单地工作您期望它如何工作。首先,Vue Router 在 "parent" 组件中,而 Angular 组件(通过 Web 组件)尝试设置路由然后失败。

您将不得不重构 Angular 组件以不使用路由。

这不是 Vue 与 Angular 与 Web 组件的问题,而是路由问题。