如何在AngularJS SPA应用程序中处理浏览器刷新?

前端之家收集整理的这篇文章主要介绍了如何在AngularJS SPA应用程序中处理浏览器刷新?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的AngularJS应用程序使用

> ui-router
> index.html文件
>所有登录和数据调用都转到ASP.NET Web控制器,其URL以/ api / xxx开头.

用户进入myapp.com然后服务器index.html这就是我想要的.当用户现在选择该页面上的链接时,ui-router会在index.html中显示相应的模板,浏览器URL栏会正确显示以下地址:

myapp.com/home
myapp.com/home/overview
myapp.com/city
myapp.com/city/london

请注意,我的配置设置如下:

.config([
    '$httpProvider','$locationProvider','$sceProvider','$stateProvider',function (
        $httpProvider,$locationProvider,$sceProvider,$stateProvider) {
        $sceProvider.enabled(false);
        $locationProvider.html5Mode(true);

如果用户现在点击刷新,则浏览器会忘记它在index.html上并尝试查找网页:myapp.com/city/london等当然不存在.然后显示一个错误页面,说明该页面不存在.

我该如何处理这种情况?我希望用户点击myapp.com/city进行刷新,最好回到myapp.com/city

编辑

当您使用带有角度的HTML5模型时,您必须告诉服务器如何处理请求如果您到达其中一条路线,例如,如果您尝试访问myapp.com/city,您将收到错误,因为服务器正在运行在服务器的根目录中查找不在那里的city.html页面.如果您从应用程序中导航到该路线它将正常工作,但如果您将其复制并粘贴到浏览器地址栏中,您将获得404,因为服务器不了解如何访问city.html.一个简单的解决方法是避免使用HTML5路由模式.根据角度文档,您需要进行一些URL重写,以使您的服务器了解如何路由到这些页面

From the docs

Using HTML5 mode requires URL rewriting on server side,basically you
have to rewrite all your links to entry point of your application
(e.g. index.html)

你也可以看看here,这个答案讨论了如何让HTML5路由与你的服务器一起工作.

猜你在找的Angularjs相关文章