Итак, я получил приложение Vue. Когда запрос определенных значений входит в панель URL-адресов, компонент запускается и отображает информацию, но когда этот запрос удаляется, компонент тоже.
Каждый раз, когда я нажимаю кнопку «Назад», он удаляет запрос (ожидаемое поведение). Поэтому я хочу остановить браузер от удаления строки запроса (или вернуться до того, как строка запроса была применена), спросив пользователя, уверены ли они, что хотят выйти, если да, то нормальное поведение, если нет, то не возвращаться и продолжить с текущим.
Я пробовал следующее:
window.onbeforeunload
window.onpopstate
window.onhashchanged
Я также пытался добавить запрос обратно после его удаления, но это обновляет страницу.
Но все они не работают для этой конкретной проблемы. Вот как я называю компонент:
<exampleComponent v-if="$route.query.exampleQuery"></exampleComponent>
Вот как я могу добавить параметры запроса в URL:
handle.$router.push('?exampleQuery=' + _id);
Редактировать
Я уже пробовал навигационные охранники. Но дело в том, что это не изменение маршрута, когда вы добавляете параметры запроса, поэтому, когда нажимается кнопка «Назад» в браузере, она не срабатывает beforeRouteLeave / beforeRouteUpdate. Я добавил компонент и родительский элемент, но просто ничего:
beforeRouteUpdate (to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
},
Мой URL:
http://www.example.com/library?id=huf2i783fh8
Затем <ResourceView v-if="$route.query.res"></ResourceView> запустит компонент. Когда пользователь нажимает обратно в браузере, мой URL меняется на:
http://www.example.com/library
Затем он закрывает / останавливает компонент, но не должен, ему нужно запросить are you sure?, затем при подтверждении изменения, а не при отмене.