使用浏览器返回时，Angular $location不会更新

Angular $location not updating when browser back is used

本文关键字：location 更新 Angular 浏览器 返回      更新时间：2023-09-26

有人遇到过这种行为吗？关于它的内容不多提及，其他帖子在性质上也有所不同。这似乎与有关浏览器行为的文档不一致。

当用户将 URL 与浏览器同步时

  • 更改地址栏。
    • 单击
  • 后退或前进按钮（或单击"历史记录"链接）。
  • 点击链接。

https://docs.angularjs.org/api/ng/service/$location#！

发生什么：

  • 加载页 - 哈希更新 （http://localhost:9000/#/）
  • 单击"开始" - 通过功能更新 $location.$$path 以更新哈希并加载新视图 （http://localhost:9000/#/guide）
  • 棘手！用户在浏览器中单击后退按钮，哈希更新回 http://localhost:9000/#/但调试告诉我 $location.$$path 仍然认为我们在 $location.$$path =/guide - 基于位置路径的逻辑不起作用。
这是现场的

观察程序，可帮助调试：

// listen for the event in the relevant $scope
$rootScope.$on('locationChange', function (event, data) {
    console.log(data);
});
//Call locationChange watch at anytime the page is loaded 
$scope.$emit('locationChange', $location.$$path);

这是路由：

$routeProvider
    .when('/guide', {
        templateUrl: 'views/guide.html',
        controller: 'GuideController',
        controllerAs: 'guide'
    })
    .when('/', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
    })
    .otherwise({
        redirectTo: '/'
    });

我是如何解决这个问题的：

var pop = 0;
window.onpopstate = function(event) {
    if (document.location.pathname === '/' && pop > 1) {
        pop = 0;
        document.location = 'http://localhost:9000/';
    }
    pop++;
};
相关文章：