angular.js - How should a single-page application (ng/vue) monitor when the user leaves the current page (or route)?

Question

Scenario description: In a certain route of ng, when the user leaves the current route, the user needs to be prompted to confirm whether to leave

My doubt: If it is an ordinary application, we can use js to determine whether the user wants to leave, but in a single-page application, all jumps and exits are actually on one page. I want to determine whether the user leaves. The current route, but the method provided by ng for public accounts to leave the route is not found

Please give me some ideas~

Answer 1

I only know that Vue can

route: {
            deactivate() {
                ...
            }
        }

Answer 2

ui-router has an event that can monitor state changes, and the parameters in the callback function can record the current page
$rootScope.$on('$stateChangeStart', function (event, toState, fromState){
});

Answer 3

If ui-router is used as the routing system in ng. You can use the event system of ui-router to make corresponding business logic for changes in routing status.

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
    event.preventDefault();
    // transitionTo() promise will be rejected with
    // a 'transition prevented' error
})

For details, please refer to $state in ui-router

Answer 4

JS natively monitors whether the page hash changes through the hashchange event. In single-page applications, many frameworks will encapsulate this method into a hook function.