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

Question

I have been doing research and looking at different solutions but can't seem to find one that fits my need. I have an AngularJS app that is doing some changes on systems. It has many HTML views for showing changes, pushing and removing changes if something goes wrong. So app goes like this:

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.

I am writing python scripts for performing changes on systems and using Flask for APIs.

Now my issue is if the user is on Page 4 and hits the back button, it goes back to 'push changes' page and actually starts pushing same changes all over again. Is there any way I can modify it so if on any page user hits the back button on the browser, it sends them back to the homepage?

Sharing the code won't help as I have many files with tons of code. Here is some overview of my routes and views that might make it a bit clear:

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

You can add popstate listener to handle events of user hitting back or forward buttons.

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

UPDATE : how to redirect to home state

Whit the next piece of code, you are creating the component home, setting its HTML template, controller and then, adding a configuration to map it to the 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',
            });
    }]);

Then, in the event listener for the popstate event, you would have $state.go('home');

Answer 2

尝试这个;

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