Question

我正在用angular2和MVC5编写单页应用程序。不过，我对两者都很陌生，而且我在路由方面遇到了麻烦。

我想将网址匹配为：

/ - ＆gt;转到我的索引页面，其中包含bootstraps angular
/api/{controller}/{id?} - ＆gt; REST API
/{*anythingelse} - ＆gt;如果存在文件，则将其作为静态内容返回;否则，如果角度可以路由它，有角度路线;否则返回404。

第二点很容易，如果我愿意放弃404返回，我可以让客户端路由工作，但我似乎无法协调它。

这似乎应该有效：

app.UseStaticFiles();
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "api",
        template: "api/{controller}/{id?}");
    routes.MapRoute(
        name: "spa",
        template: "{*anythingelse}",
        defaults: new { controller = "Home", action = "Index" });
});

和

@RouteConfig([
    { path: "/", name: 'Splash', component: SplashView },
    { path: '/accounts/login', name: 'Login', component: LoginView },
    { path: '/accounts/register', name: 'Registration', component: RegistrationView },
    { path: '/home/...', name: 'Home', component: HomeView },
])

但是，这只是为每个非静态文件的请求提供Index.cshtml。

我觉得这已经是一个已经解决的问题，但我无法在网上找到任何关于它的信息。如何正确地做到这一点？

我使用的是“HTML5”风格的路径，而不是哈希风格。

Answer 1

所以有两种方法可以做到这一点。如果您正在使用HashLocationStrategy，我强烈建议您在服务器端实现这样做，因为我发现它更容易处理。

否则，您可以创建自己的RouterOutlet组件来处理异常。我不是100％清楚如何让它与你的RouterConfig一起工作，因为我没有深入研究路由方面，但我打赌你可以看到是否存在路由然后去那里否则404错误。这是我的代码，用于查看用户是否使用Json Web令牌登录。

if ($('.test').css('background-image') === 'url(/background1.png)') {
    $('.test').css("background-image", "url(/background2.png)");
}

正如您所见，我处理了对令牌的检查，如果他们没有令牌，他们只能进入我的登录页面。然后在你的app.component或你的bootstrapped组件中使用它作为你的路由器插座而不是原来的。

抱歉，我不能提供更多帮助，但我希望这能让你指出正确的方向！

Answer 2

我认为您正在寻找正则表达式路由约束：

routes.MapRoute("app", "{*anything}", 
    new { controller = "Home", action = "Index" }, 
    new {anything = new RegexRouteConstraint("^(?!api\\/).+") });

这将阻止您捕获所有路线从映射到以＆＃34; api /＆＃34;

开头的任何请求

MVC6路由到单页面应用程序而不会丢失404

2 个答案: