Ограничения beforeRouteLeave?

Question

Я использую Vue.js с vue-router и задаю вопрос о навигационной системе 'beforeRouteLeave'. Я использую его для грязной проверки объекта продукта в компоненте ProductDetail, когда пользователь нажимает кнопку «Отмена» (поэтому я могу установить диалог подтверждения, если есть несохраненные изменения). Он отлично работает, пока пользователь нажимает кнопку «Отмена», которая изменяет маршрут на «/ product/list» (из «/ product/detail»). Если, однако, пользователь непосредственно вводит «/ product/list» в адресной строке браузера, он не вызывается. Это незначительная неприятность, а не шоу-стоппер, но мне просто интересно, есть ли способ, которым я могу обойти это и заставить его вести себя так же, как ссылка или кнопка?

РАЗЪЯСНЕНИЕ ДАЛЕЕ, КАК ЗАПРОШЕННЫЙ: В компоненте в вопросе, нажав кнопку Отмена вызовов this.$router.push({name:'product-list'}), который определен в конфигурации маршрутизатора с пути '/ продукта/список. Когда это происходит, охранник «beforeRouteLeave» успешно вызывается до изменения маршрута. Если, однако, пользователь непосредственно вводит «/ product/list» в адресную строку и изменяет маршрут таким образом, «beforeRouteLeave» для моего компонента обходит.

Answer 1

Попробуйте window.onbeforeunloadhttps://jsfiddle.net/z11fe07p/578/, если вы хотите предотвратить удаление ссылки без сохранения изменений.

window.onbeforeunload = function(){ 
    return "Are you sure you want to close the window?"; 
}