AngularJs中的VueJs-如何阻止AngularJs截取VueJs特定的路线

Question

我维护了一个（传统的）大型电子商务Web应用程序（使用AngularJS构建），并且正在使用VueJ从头开始重建它。

不幸的是，这两个应用必须共存（直到所有现有功能都在VueJ中重写），这意味着当我在VueJ上重建功能时，我们会将用户迁移到该新组件（或页面或功能），而不是旧版。

这样做没有问题，我可以设置配置文件等来设置组件之间的路由。

但是要注意的是，VueJS应用程序必须可以在AngularJs应用程序中使用。这是由于许多因素造成的，其中包括SEO（无法选择使用子域），复杂的部署等。

为了使VueJs应用程序存在于AngularJs应用程序中，我已经做了我需要做的一切，除了一个特定的路由问题外，几乎所有东西都可以正常工作。

运行我的build命令后，这是一个非常粗糙的结构：

• / dist <---- AngularJs应用程序根
  • index.html
  • /应用
    • app.js
    • app.css
  • / vue <---- VueJs应用程序根
    • index.html
    • ...等

当用户着陆到site.com/vue时，vue接管了工作，内部<router-link>的工作正常。

问题是，当用户在地址栏site.com/vue/page-1中专门键入类似的内容时。 AngularJs截获了它，并基本上将其称为404。

我试图通过创建UI路由器状态来解决此问题，该状态具有特定的URL /vue/:page，与我的VueJs应用位置的文件夹匹配。但这实际上并不能很好地完成工作。

我还尝试在ui-router的$stateChangeStart上侦听路由更改，但这会很快变得昂贵。

谁能想到解决此问题的方法？我知道非常奇怪的情况，但是不幸的是，我对整体体系结构的选择没有太多选择。

Answer 1

用户键入url后-浏览器发送新的http请求，然后由您的服务器决定返回什么内容。 （这通常与js或UI无关）。我猜您的服务器为未找到的路由返回了angular index.html，您可以轻松地对此进行更改。