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

发布时间：2020-12-17 07:28:50 所属栏目：安全来源：网络整理

导读：我的AngularJS应用程序使用 ui-router index.html文件所有登录和数据调用都转到ASP.NET Web控制器,其URL以/ api / xxx开头. 当用户进入myapp.com然后服务器index.html这就是我想要的.当用户现在选择该页面上的链接时,ui-router会在index.html中显示相应的模

我的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路由与你的服务器一起工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!