www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Как предотвратить обновление браузера, изменение URL-адреса или навигацию по маршруту в Vue

Дата публикации Oct 3, 2019

Время от времени вВьюВы хотите запретить пользователю переходить от маршрута или перезагружать страницу. Например, возможно, они внесли изменения в форму без сохранения.

Такое поведение не доступно сразу, но его относительно легко осуществить.

Во-первых, нам понадобится какое-то условие, чтобы отследить, может ли пользователь уйти. В вашем случае это может отличаться, но для этого примера у нас будет логическое отслеживание того, редактирует ли пользователь что-то.

<script>
export default {
data: () => ({
isEditing: false
})
</script>

Запретить изменение URL и / или перезагрузку страницы.

Далее нам нужно добавить некоторую логику, чтобы пользователь не мог перейти на новый URL или перезагрузить страницу, пока нашisEditingфлаг это правда. К счастью, в браузере есть роднойbeforeunloadсобытие только для этого.

Мы добавим его вbeforeMountперехватите, чтобы мы знали, что не находимся в серверной среде:

<script>
export default {
// ...
beforeMount() {
window.addEventListener("beforeunload", event => {
if (!this.isEditing) return
event.preventDefault()
// Chrome requires returnValue to be set.
event.returnValue = ""
})
}
}
</script>

Vue делает большую работуавтоматическое удаление любых обработчиков событийкоторые добавляются в шаблон, но все, что мы создаем вручную, следует очистить, чтобы избежать утечек памяти.

Для этого мы преобразуем нашу анонимную функцию в именованный метод, чтобы мы могли очистить ее вbeforeDestroyкрюк:

<script>
export default {
// ...
beforeMount() {
window.addEventListener("beforeunload", this.preventNav)
},

beforeDestroy() {
window.removeEventListener("beforeunload", this.preventNav);
},

methods: {
preventNav(event) {
if (!this.isEditing) return
event.preventDefault()
event.returnValue = ""
}
}
}
</script>

При желании вы также можете собрать логику прослушивателя событий, используя метод Vue:

<script>
export default {
// ...
beforeMount() {
window.addEventListener("beforeunload", this.preventNav)
this.$once("hook:beforeDestroy", () => {
window.removeEventListener("beforeunload", this.preventNav);
})
},

methods: {
preventNav(event) {
if (!this.isEditing) return
event.preventDefault()
event.returnValue = ""
}
}
}
</script>

Запретить навигацию по роутеру

Большой! Пока что наш компонент предотвратит случайную потерю пользователем изменений при изменении браузера, но вполне вероятно, что изменения вашего маршрута фактически обрабатываются JavaScript. Если это так, вам также нужно запретить навигацию маршрутизатора Vue.

Для этого мы можем удобно подключиться ккомпонентная навигационная защитаbeforeRouteLeave(при условии, что вы используете).

beforeRouteLeave, как следует из названия, запускается всякий раз, когда вы собираетесь отойти от текущего маршрута. Это дает нам несколько параметров для работы:

  • to: маршрут для навигации.
  • from: маршрут, который вы собираетесь покинуть.
  • next: th функция, используемая для вызова навигации. Вы также можете использовать это, чтобы перейти к любому другому маршруту, который вам нравится.

Для наших целей мы заинтересованы только вnextпараметр, и мы можем объединить это с проверкой, чтобы спросить пользователя, хотят ли они продолжить навигацию:

<script>
export default {
// ...
beforeRouteLeave(to, from, next) {
if (this.isEditing) {
if (!window.confirm("Leave without saving?")) {
return;
}
}
next();
}
}
</script>

Заканчивать

При этом у нас есть небольшой симпатичный компонент, который не позволяет пользователю перемещаться в зависимости от нашей логики. Конечно, мы не реализовали никакой логики, но я оставлю это на ваше усмотрение.

Все выглядит так:

<script>
export default {
data: () => ({
isEditing: false
}),

beforeMount() {
window.addEventListener("beforeunload", this.preventNav)
this.$once("hook:beforeDestroy", () => {
window.removeEventListener("beforeunload", this.preventNav);
})
},

beforeRouteLeave(to, from, next) {
if (this.isEditing) {
if (!window.confirm("Leave without saving?")) {
return;
}
}
next();
},

methods: {
preventNav(event) {
if (!this.isEditing) return
event.preventDefault()
event.returnValue = ""
},
},
}
</script>

Вы можете увидеть рабочий пример здесь:

В качестве следующего шага, это может быть хорошим кандидатом на. И если это то, что вы хотели бы получить вVuetensils, дай мне знать.


Первоначально опубликовано наhttps://stegosource.com3 октября 2019 г.

Оригинальная статья

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map