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.

我正在編寫用於在系統上執行更改並使用Flask for API的python腳本。

現在我的問題是，如果用戶位於第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偵聽器來處理用戶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 });