angular.js - 單頁應用程式（ng/vue）該如何監聽使用者離開目前頁面（或路由）？

Question

場景描述：在ng的某個路由中，需要在使用者離開目前路由時提示使用者是否確認離開

我的疑惑：如果是普通的應用，我們可以使用js來判斷用戶是否要離開，但是在單頁應用中，所有的跳轉離開其實都是在一個頁面中，我想判斷用戶是否離開當前路由，但沒找到ng提供的公戶離開路由的方法

求各位前輩的思路~

Answer 1

我只知道Vue可以

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

Answer 2

ui-router裡面有一個事件可以監控狀態的改變，回呼函數中參數可以記錄當前頁
$rootScope.$on('$stateChangeStart', function (event, toState, fromState){
});

Answer 3

ng中如果使用ui-router來作為路由系統。可以使用ui-router的事件系統來對路由狀態的變化做出對應的業務邏輯。

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

詳情可以參考ui-router中的$state

Answer 4

js原生透過hashchange事件，來監聽頁面hash是否變化，在單一頁面應用中，很多的框架都會封裝這個方法成鉤子函數。