Javascript - 如果单击后退按钮，如何重定向到主页

Question

我一直在研究并寻找不同的解决方案，但似乎找不到适合我需要的解决方案。我有一个 AngularJS 应用程序正在对系统进行一些更改。它有许多 HTML 视图，用于显示更改、在出现问题时推送和删除更改。所以应用程序是这样的：

Page 1:  Login and get user input
Page 2:  Show changes that user is going to commit
Page 3:  Push changes
Page 4:  Show results
They have an option to remove changes if something does no look right.

我正在编写 python 脚本来对系统执行更改并将 Flask 用于 API。

现在我的问题是，如果用户在第 4 页并点击后退按钮，它会返回到“推送更改”页面并实际上开始再次推送相同的更改。有什么办法可以修改它，所以如果在任何页面上用户点击浏览器上的后退按钮，它会将它们发送回主页？

共享代码无济于事，因为我有很多包含大量代码的文件。以下是我的路线和观点的一些概述，可能会让它有点清楚：

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "./views/userForm.htm",
        controller : "inputController"
    })
    .when("/checkChanges", {
        templateUrl : "./views/checkChanges.htm",
        controller : "checkChangesController"
    })
    .when("/pushChanges", {
        templateUrl : "./views/pushChanges.htm",
        controller : "pushChangesController"
    })
    .when("/results", {
        templateUrl : "./views/results.htm",
        controller : "resultsController"
    })
    .when("/remove", {
        templateUrl : "./views/remove.htm",
        controller : "removeController"
    })

Answer 1

您可以添加popstate 监听器来处理用户点击后退或前进按钮的事件。

window.addEventListener('popstate', function() {
    $state.go(...); //go to your home state
});

更新：如何重定向到家庭状态

在下一段代码中，您将创建组件主页，设置其 HTML 模板、控制器，然后添加配置以将其映射到 URL '/'。

var home = {
    templateUrl: './templates/home.html',
    controller: 'homeController'
};

angular
    .module('myApp')
    .component('home', home)
    .config(["$stateProvider", function($stateProvider){
        $stateProvider
            .state('home', {
                url: '/',
                component: 'home',
            });
    }]);

然后，在 popstate 事件的事件侦听器中，您将拥有 $state.go('home');

Answer 2

试试这个；

 window.addEventListener('popstate', () => { //handler });