Введение: Vue Router да Vue.js Официально предоставляемый маршрутизатор, который используется для управления навигацией по маршруту в одностраничных приложениях (SPA). существовать Vue Router середина,Navigation Guard – очень важная функция,Он может выполнять некоторые специфические операции до или после перехода по маршруту. Но да,если ты не будешь осторожен,Навигационные охранники могут выполняться несколько раз.,Это может вызвать некоторые проблемы. В этой статье будет описано, как избежать многократного выполнения навигационных средств защиты.,и предоставить решения.

Основные понятия о навигационных средствах защиты

В Vue Router средства защиты навигации разделены на четыре этапа: beforeEach, beforeEnter, afterEach и afterEnter. Они выполняются соответственно после начала навигации, входа в компонент маршрутизации, завершения навигации и загрузки компонента маршрутизации.

• beforeEach: существование выполняется перед входом каждого маршрута,И это действительно только для текущего маршрута.
• beforeEnter: существование выполняется перед входом в компонент маршрутизации,И это действительно только для текущего маршрута.
• afterEach: существование выполняется после завершения каждого маршрута,И это действительно только для текущего маршрута.
• afterEnter: выполняется после загрузки компонента маршрутизации существования.,И это действительно только для текущего маршрута.

Избегайте ловушек множественных казней

иногда,Нам нужно выполнить некоторые операции в существовании маршрутной охраны.,Например проверка пользователяда Нет входа в систему。если мысуществовать每个路由的 beforeEach Если выполнить эту операцию в гарде, могут возникнуть проблемы. Потому что каждый раз, когда вы перемещаетесь, он будет выполняться beforeEach Охранники будут казнены повторно, даже если маршрут не изменился. Это приводит к тому, что операция выполняется несколько раз, что может вызвать некоторые проблемы.

Например, предположим, что мы beforeEach В гвардии проверьте, авторизован ли пользователь да. Если нет, перейдите на страницу входа. Если пользователь существовал на странице входа, но закрывает страницу до завершения операции входа, при повторном открытии страницы из-за beforeEach Встреча охранниковнеоднократноосуществлять,приведет к повторному перенаправлению пользователя на страницу входа в систему,Это не тот результат, который нам нужен.

Подводные камни в реальных проектах

Пример:

...код опущен

router.afterEach((to, from) => {
  if (to.path !== from.path) {
// Запрос на интерфейс отправляется сюда
    axios.get('xxxx')
  }
});

...код опущен

onMounted(() => {
//
})

Если мы поменяем компоненты,Инициализируйте этот компонент еще раз,вызовет этоaxios.get('xxxx') Этот метод вызывается несколько раз.

причина: существовать Vue Router середина,когда тыиспользовать router.afterEach При добавлении глобальной навигационной защиты навигационная защита будет сохранена существующая. Vue Router во внутреннем экземпляре. При изменении маршрутизации Vue Router Эти средства защиты навигации будут получены из внутреннего экземпляра и выполнены в соответствующее время.

В частности, когда вы используете компонент router.afterEach Когда эта навигационная защита будет добавлена ​​в Vue Router в глобальной конфигурации, а не в стеке вызовов существующего компонента. Таким образом, даже если компонент будет уничтожен, этот навигационный щиток все равно останется существовать. Vue Router внутренний экземпляр и продолжить выполнение при следующем изменении маршрута.

Суммируя,Глобальная защита навигации не хранится в стеке вызовов компонента существования.,И да хранится во внутреннем экземпляре существующего Vue Router. Вот почему компонент существования уничтожается после,Причина, по которой навигационная защита продолжает работать.

Предложите решения (примеры)

Чтобы избежать многократного выполнения навигационной защиты, мы можем использовать следующие два метода:

Ключевые моменты: существоватьобщая ситуацияиспользоватьединый перехват,не хочусуществовать组件серединаиспользовать,Избегайте использования компонентов,Компонент уничтожен,Фактически функция да на перехватчике не будет уничтожена,когда вы снова инициализируете,Это приведет к неожиданному выполнению дважды или несколько раз.

1. использовать router.afterEach(() => { ... })

существовать afterEach Выполнение операций в охранниках позволяет избежать проблемы многократного выполнения. потому что afterEach Только охранасуществовать导航完成之后осуществлять,Независимо от маршрутизациида Без изменений。

Например, мы можем поместить действие проверки входа пользователя в действие послеEach На страже:

router.afterEach(() => {
  if (!loginStatus) {
    router.replace('/login')
  }
})

существуют В этом примере после каждого Guard существования выполняется после завершения каждого маршрута, если пользователь не вошел в систему, то использовать router.replace() Метод перенаправляет пользователя на страницу входа. Таким образом, независимо от того, как пользователь перемещается, пока он не вошел в систему, он будет перенаправлен на страницу входа, что позволяет избежать проблемы, связанной с многократным выполнением навигационных средств защиты.

2. использовать router.beforeRouteLeave(to, from, next)

Еще один, чтобы избежать навигационных охранниковнеоднократноосуществлять的方法даиспользовать beforeRouteLeave сторожить。Работает только для исходящих маршрутов.,поэтому можно избежатьсуществовать Перед входом в компонент маршрутизациинеоднократноосуществлять操作。

Например, мы можем проверить, вошел ли пользователь да в защиту beforeRouteLeave:

router.beforeRouteLeave((to, from, next) => {
  if (!loginStatus) {
    next('/login')
  } else {
    next()
  }
})

существуют В этом примере,beforeRouteLeave Guard существования выполняется непосредственно перед уходом с текущего маршрута, если пользователь не вошел в систему, то использовать next('/login') Метод перенаправляет пользователя на страницу входа. Таким образом, независимо от того, как пользователь перемещается, пока он не вошел в систему, он будет перенаправлен на страницу входа, что позволяет избежать проблемы, связанной с многократным выполнением навигационных средств защиты.

Подвести итог

существовать Vue Router Защита навигации да — очень полезная функция, но она может вызвать проблемы при многократном выполнении. Чтобы избежать этой проблемы, мы можем использовать router.afterEach(() => { ... }) илиrouter.beforeRouteLeave((to, from, next) => { ... }) метод, позволяющий избежать многократного выполнения. Выберите подходящий метод в соответствии с вашей конкретной ситуацией, чтобы сделать ваше приложение более стабильным и надежным.

Я участвую в специальном учебном лагере Tencent Technology Creation 2023 Выпуск 4 Конкурс эссе, получивший приз. Приходите и разделите приз со мной!