使用ui路由器在AngularJS中的浏览器后退/前进按钮上重新加载页面答案

【问题标题】：Reload page on browser back/forward button in AngularJS with ui router使用ui路由器在AngularJS中的浏览器后退/前进按钮上重新加载页面
【发布时间】：2015-04-14 20:14:53
【问题描述】：

我的 angularjs 应用程序中有以下 ui 路由器状态配置。

    $locationProvider.html5Mode(true);
    $stateProvider
        .state('index', {
            url: '/index?zoom&center',
            views: {
                'map': {
                    controller: 'MapCtrl',
                    templateUrl: 'map.html'
                }
            },
            reloadOnSearch:false
    });

但是，浏览器中的后退按钮转到不同的 url，但我需要重新加载页面，并将 url 作为 stateParams。

例如：用户 1 转到页面 http://www.example.com/index?zoom=2&center=1,2。然后他在页面里做一堆操作，url变成http://www.example.com/index?zoom=12&center=3,4

然后他按下后退按钮，url变为上一个，但我需要重新加载我的页面，让控制器读取查询参数来做正确的事……

有什么方法可以让它与浏览器后退/前进一起工作？

【问题讨论】：

“但页面没有刷新”- 如果你的意思是页面没有得到完全刷新，那么你错过了 Angular 的点，即让后退/前进按钮在没有整页刷新的情况下工作让事情变得更快，
但我需要根据 url 重新加载我的页面。

标签： javascript angularjs angular-ui-router html5-history

【解决方案1】：

您是否尝试过将reloadOnSearch 设置为true？如果这不能满足您的需求，不妨看看这个问题：Force AngularJS to reload a route although option reloadOnSearch is set to false

一个更简单的替代方法可能是在必要时使用 window.location = newUrl 强制重新加载。

【讨论】：

当然我想使用 ui 路由器状态。但仍想使用浏览器历史记录，因为用户可能会在浏览器中单击它们。
据我所知，您不能同时拥有两者，因为重新加载页面时状态会被删除。您必须将状态存储在 url 或 cookie 中，以通过页面重新加载来保留它。有 3rd 方组件可以帮助解决此问题。
@user23878 我更新了我的答案；我想我误解了你的问题。
这很接近答案。我尝试了 $route.reload()，但它不起作用。然后我必须使用 window.location = newUrl 强制重新加载。