如何重新加载浏览器并在 AngularJS UI-Router 中保持当前状态？答案

【问题标题】：How to reload browser and and keep current state in AngularJS UI-Router?如何重新加载浏览器并在 AngularJS UI-Router 中保持当前状态？
【发布时间】：2016-08-26 15:45:56
【问题描述】：

我构建了一个小型 Web 应用程序，在其中使用 UI-Router 来导航其页面。除了浏览器刷新或使用状态链接访问特定页面外，一切正常。我尝试了在同一主题上发布的几种解决方案，但可能由于缺乏其他信息，它们都没有帮助。

当我点击下面的 ui-sref 链接时，我得到“mysite/content”并且页面显示正常，但是一旦我刷新它或尝试通过粘贴链接来访问它就找不到页面。

能否请您帮助我使其按预期工作。提前致谢。

HTML

<p ui-sref="content">Link To Content</p>

AngularJS

var app = angular.module('myApp',['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouteProvider, $locationProvider){


    $urlRouteProvider.otherwise('/');


    $stateProvider

        .state('home', {
            url: '/',
            views: {
                '': { templateUrl: '/app/templates/wrapper.html'},
                'nav@home': { templateUrl: '/app/templates/nav.html'},
                'header@home': { templateUrl: '/app/templates/header.html'},
                'footer@home': { templateUrl: '/app/templates/footer.html'}
            }
        })

        .state('content', {
            url: '/content',
            views: {
                '': { templateUrl: '/app/templates/content.html'},
                'nav@content': { templateUrl: '/app/templates/nav.html'},
                'header@content': { templateUrl: '/app/templates/header.html'},
                'footer@content': { templateUrl: '/app/templates/footer.html'}

            }
        });

    $locationProvider.html5Mode(true);


}])

【问题讨论】：

在页面加载之前您有需要解析的数据吗？也许你的应用数据没有加载...
当前应用完全为空。现在我注意到，如果我将 $locationProvider.html5Mode(true) 设置为 false，它会按预期工作，但链接中有破折号。试图解决它

标签： angularjs angular-ui-router

【解决方案1】：

当 html5Mode 设置为 true 时，当刷新页面时，您的浏览器将向“mysite/content”发出请求。在经典的单页应用程序中，您的后端有一组响应某些数据的路由，并且通常配置为返回所有其他路由的应用程序 index.html（例如“mysite/content”）。

当您禁用 html5Mode 时它会起作用，因为浏览器向 url 发出请求时没有 '#' 之后的部分，您的后端肯定会返回预期的 index.html。

【讨论】：