混合 SPA 和 ASP.NET MVC 路由答案

【问题标题】：Mixed SPA and ASP.NET MVC Routing混合 SPA 和 ASP.NET MVC 路由
【发布时间】：2018-02-14 17:27:46
【问题描述】：

我正在开发一个混合路由 Angular 2 和 ASP.NET Core 2 (razor) 项目。您将如何跳出角度路由并获得剃须刀页面？我尝试使用角度路由捕获所有未知路由并重新加载未知路由，但如果有路由 ASP.NET 并且 angular 无法识别它会进入循环。 Startup 类的 Configure 方法包含这个。

public void Configure(IApplicationBuilder app)
{
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "Index",
            defaults: new { controller = "controller", action = "Index" },
            template: "{controller}");

        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");

        routes.MapRoute(
            name: "Login",
            defaults: new { controller = "Sessions", action = "New" },
            template: "Login");
    });

    app.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";
    });
}

一些例子：

Mvc 路由Mysite.com/documents/view/
角路线Mysite.com/PendingTransactions

【问题讨论】：

如果您对某个问题投反对票，请有礼貌地指出原因。
你有 angular 应用程序和 mvc 应用程序共享一些共同的路由。即 mysite.com/app/angular 和 mysite.com/app/mvc？请提供一些示例，说明您的应用程序中的路由以及您对这些路由的 MVC 和 Angular 配置。
刚刚注意到您使用的是 ASP.Net Core MVC。我已经在 ASP.Net MVC (NOT Core) 中用 angular 5 解决了这个问题。如果你想让我用对我有用的方法来回答这个问题，请告诉我，但你必须自己将它应用到 Core。
我希望你 (Zzz) 回答有关 asp.net mvc 的问题，我会尝试将其移植到核心。
我的回答有帮助吗？

标签： c# asp.net-mvc angular asp.net-core asp.net-core-mvc

【解决方案1】：

解决方案适用于 MVC 4。

注意：您应该将默认路线放在所有其他路线之后，但在您的全部路线之前。

从 MVC 路由中排除 Angular 应用程序（你会注意到真/假评估的一些有趣之处，这是因为应用程序路由由 MVC 处理，除非我们在 /app 角度应用程序中。你可以看到相反的植入 @987654321 @):

routes.MapRouteLowercase(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
                constraints: new
                {
                    serverRoute = new ServerRouteConstraint(url =>
                    {
                        var isAngularApp = false;
                        if (url.PathAndQuery.StartsWith("/app",
                            StringComparison.InvariantCultureIgnoreCase))
                        {
                            isAngularApp = true;
                        }               
                        return !isAngularApp;
                    })
                }
            );

ServerRouteConstraint 类：

 public class ServerRouteConstraint : IRouteConstraint
    {
        private readonly Func<Uri, bool> _predicate;

        public ServerRouteConstraint(Func<Uri, bool> predicate)
        {
            this._predicate = predicate;
        }

        public bool Match(HttpContextBase httpContext, Route route, string parameterName,
            RouteValueDictionary values, RouteDirection routeDirection)
        {
            return this._predicate(httpContext.Request.Url);
        }
    }

当没有其他路由匹配时，这是一个包罗万象的方法。让 Angular 路由器来处理它

    routes.MapRouteLowercase(
        name: "angular",
        url: "{*url}",
        defaults: new { controller = "App", action = "Index" } // The view that bootstraps Angular 5
    );

【讨论】：