I am trying to show a confirmation alert before leaving the page, but it does not work when I use a link with routerlink, or when I return to the previous page

I currently did this and it works when closing the tab, or reloading the page

 $(function(){
     window.onbeforeunload = function (e) {
        e = e || window.event;
        if (e) {
            e.returnValue = 'Do you really want to leave?';
        }
        return 'Do you really want to leave?';
    };
 });

I tried this but sometimes it doesn't work

@HostListener('window:beforeunload', ['$event']) yourfunction($event) {
  return $event.returnValue='Your changes will not be saved';
}

Thanks