javascript - 使用浏览器后，Angular $location 不会更新

Question

有人遇到过这种行为吗？对此没有太多提及，其他帖子性质不同。这似乎与有关浏览器行为的文档不一致。

Synchronizes the URL with the browser when the user

• Changes the address bar.
• Clicks the back or forward button (or clicks a History link).
• Clicks on a link.

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

发生了什么:

• Load page - 哈希更新 ( http://localhost:9000/#/ )
• 点击“开始” - 通过函数更新 $location.$$path 以更新哈希值并加载新 View ( 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: '/'
    });

Answer 1

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

var pop = 0;

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