如何在durandaljs 2.0中设置push-state以进行刷新?

时间:2013-08-18 17:09:32

标签: durandal pushstate

我正在使用durandaljs 2.0。我按照建议安装了durandal starter-kit并解释了here。在shell中,我正在返回router.activate({ pushState: true } );,如相关documentation中所述(请参阅页面底部)。 令人高兴的是,URL确实处于“推送状态”格式,例如http://localhost:61285/flickr - 问题是,当我刷新页面时,我收到404错误,告诉我“无法找到资源”。如果我将push-state设置为false({pushState: false}以上),我会得到一个哈希的网址,例如: http://localhost:61285/#flickr - 现在刷新确实有效。那么,如何在durandaljs 2.0中设置推送状态模式,该模式将与刷新一起使用?

谢谢,

Elior

3 个答案:

答案 0 :(得分:4)

也许迟到......但是

只需更改路由配置即可。 这很简单:

routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index" }
        );

答案 1 :(得分:3)

当您刷新页面时,浏览器将使用该网址http://localhost:61285/flickr向服务器发出请求。

可能发生的情况是,如果您正在使用ASP.NET MVC,服务器正在尝试查找名为flickr的Controller,并且它会抛出异常,因为显然没有任何具有该名称的资源。

为了摆脱此异常,您应该将服务器配置为提供APP的相同HTML但是针对未知URL。这可以使用ASP.NET中的IIS URL重写来实现。

因此,在正确设置服务器之后,通过请求一个未知的URL,它将返回应用程序的初始视图以及您在查询字符串参数中传递的任何内容,以便路由器可以在客户端执行其工作。

In this blog post您将找到有关如何配置ASP.NET以处理此方案的更多信息。在文章中,作者使用了AngularJS,但Durandal也是如此。

答案 2 :(得分:-1)

RainerAtSpirit和margabit,你们都是对的,谢谢你们。以下是我实现服务器端的方式:

首先我要注意,与服务器的所有交互都是通过WebApi控制器完成的 所以,例如,如果URL是: http://localhost:61285/home/category2/subCategory22(对于本地主机),服务器尝试查找名为“home”的控制器及其中名为“category2”的操作。由于没有这样的动作,我收到404错误。
我想要的是服务器将调用'home'控制器,但将其余的URL作为参数发送给客户端。我的解决方案是在控制器名称后添加哈希,以便URL看起来像这样:http://localhost:61285/home/#/category2/subCategory22。如果发生这种情况,那么客户端将处理散列部分而不会出现404错误。
要做到这一点:

我在“web.config”中添加了以下内容:

  

< customErrors mode =“On”defaultRedirect =“Error”>
  < error statusCode =“404”redirect =“Error”/>
  < /&的customErrors GT;

然后我创建一个名为'ErrorController'的控制器,其中包含以下类:

public class ErrorController : ApiController
{
[HttpGet, HttpPost, HttpPut, HttpDelete, HttpHead, HttpOptions, AcceptVerbs("PATCH"), AllowAnonymous]
    public HttpResponseMessage Handle404()
    {
        string [] parts = Request.RequestUri.OriginalString.Split(new[] { '?' }, StringSplitOptions.RemoveEmptyEntries);
        string parameters = parts[ 1 ].Replace("aspxerrorpath=","");
        var response = Request.CreateResponse(HttpStatusCode.Redirect);
        response.Headers.Location = new Uri(parts[0].Replace("Error","") + string.Format("#{0}", parameters));
        return response;
    }
}

当服务器获得如上所述没有相关操作的URL时,会发生以下格式将其重定向到此控制器:http://localhost:61285/Error?aspxerrorpath=home/category2/subCategory22
如你所见,我操纵这个来添加哈希并删除不必要的信息:http://localhost:61285/home/#/category2/subCategory22并将服务器重定向到'home'控制器。
您可能想知道为什么我会这样做 - 原因是Durandal,一个很棒的平台,使我能够使用推送状态,但为了实现这一点,我必须解决服务器获取非散列URL并通过尽管事实上没有相关的控制器/动作,但它还是给客户的; Durandal得到一个哈希的URL,但会自动删除哈希,用户最终会看到一个无哈希的URL,而Durandal提供了所有必要的推送状态功能。
Elior