angular.js - 单页应用（ng/vue）该如何监听用户离开当前页面（或者路由）？

Question

场景描述：在ng的某个路由中，需要在用户离开当前路由时提示用户是否确认离开

我的疑惑：如果是普通的应用，我们可以使用js来判断用户是否要离开，但是在单页应用中，所有的跳转离开其实都是在一个页面中，我想判断用户是否离开当前路由，但是没找到ng提供的公户离开路由的方法

求各位前辈的思路~

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.