Vue — Route Guard (жизненный цикл маршрутизатора)

Vue.js

Что такое охранник маршрута?

Официальное объяснение:

«Навигация» означает, что маршрут меняется. Как следует из названия, защита навигации, предоставляемая vue-router, в основном используется для защиты навигации путем перехода или отмены. Существует множество возможностей имплантации процессов навигации по маршруту: глобальные, для отдельных маршрутов или на уровне компонентов.

Проще говоря, навигационные сторожа — это некоторые функции-ловушки в процессе маршрутизации переходов. Маршрутизация перехода - это большой процесс.Этот большой процесс разделен на маленькие процессы, такие как до, середина и конец перехода.В каждом процессе есть функция.Эта функция позволяет вам управлять некоторыми другими вещами.Это навигация.охрана. Аналогично хукам жизненного цикла компонентов

Классификация охраны маршрута

[1] Глобальная гвардия:Это относится к функции ловушки, которая непосредственно работает на экземпляре маршрутизации.Особенность заключается в том, что все компоненты конфигурации маршрутизации будут активированы.Проще говоря, если маршрутизация запущена, эти функции ловушек будут активированы.

  • перед каждым (до, от, далее)
  • beforeResolve (до, от, далее)
  • после каждого (до, от)

[2] Защита маршрутизации:Относится к функции перехвата, которую также можно установить при настройке одного маршрута.

  • beforeEnter (до, от, далее)

[3] Защита компонентов:Относится к функции ловушки, выполняемой в компоненте, подобно жизненному циклу в компоненте, который эквивалентен функции ловушки жизненного цикла, добавленной к компоненту, который настраивает маршрут.

  • beforeRouteEnter (до, от, далее)
  • beforeRouteUpdate(до, от, далее)
  • beforeRouteLeave (до, из, далее)

Введение параметра обратного вызова Route Guard

to: целевой объект маршрутизации, который необходимо ввести;

from: объект маршрутизации, который собирается уйти;

next: функция ловушки, включающая следующий параметр, для разрешения ловушки должен быть вызван метод next(), иначе маршрутизация будет прервана здесь и не будет продолжать выполняться

  • next(): перейти к следующему хуку в конвейере. Если все хуки выполнены, состояние навигации подтверждается.
  • next( false ) прерывает текущую навигацию. Если URL-адрес браузера изменится (либо вручную пользователем, либо с помощью кнопки «Назад» в браузере), тогда URL-адрес будет сброшен на адрес, соответствующий исходному маршруту.
  • next(' / ') or next({ путь: ' / ' }): перейти к другому адресу. Текущая навигация прерывается и создается новая. Параметры, которые могут быть переданы, могут быть параметром атрибута to в теге router-link или параметром в router.push.
  • next( error ): если параметр, переданный next, является экземпляром Error, навигация будет прекращена, а ошибка будет передана обратному вызову, зарегистрированному router.onError().

Подробная защита маршрутизации

[1] Глобальная защита синтаксического анализа (beforeEach):Этот хук, срабатывающий перед переходом маршрута, в основном используется для проверки входа в систему, то есть маршрут не перешел для получения уведомления заранее, так что уведомление после перехода будет слишком поздно.

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

[2] Защита глобального разрешения (beforeResolve):Этот хук похож на beforeEach и тоже срабатывает перед переходом маршрута, разница в том, что он вызывается перед подтверждением навигации, и после разрешения компонентов guard и асинхронной маршрутизации во всех компонентах, то есть после beforeEach и beforeRouteEnter в компонент и перед afterEach.

[3] Глобальный почтовый хук (afterEach):В отличие от beforeEach, он срабатывает после завершения перехода по маршруту, после beforeEach и beforeResolve, и до beforeRouteEnter (защита внутри компонента). Эти хуки не будут принимать следующую функцию и не изменят саму навигацию.

router.afterEach((to, from) => {
  // ...
})

[4] Эксклюзивная защита маршрутизации (beforeEnter):Точно так же, как и beforeEach, если оба установлены, beforeEnter выполняется сразу после beforeEach. Определите защиту перед входом непосредственно в конфигурацию маршрута.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

[5] Защита в компонентах:

<template>
  ...
</template>
<script>
export default{
  data(){
    //...
  },
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
</script>
<style>
  ...
</style>

1. до маршрута:Этот хук вызывается после глобальной защиты beforeEach и эксклюзивной защиты beforeEnter, а также перед глобальным beforeResolve и глобальным afterEach.Следует отметить, что экземпляр компонента не может быть доступен внутри защиты, то есть это не определено. Потому что он срабатывает на этапе beforeCreate жизненного цикла компонента, когда новый компонент еще не создан. В этой функции ловушки доступ к экземпляру компонента можно получить, передав обратный вызов next. Обратный вызов выполняется, когда навигация подтверждена, и экземпляр компонента передается в качестве параметра метода обратного вызова.

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

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

3. перед выходом из маршрута:Вызывается при переходе от соответствующего маршрута компонента, вы можете получить доступ к экземпляру компонента this. Эта защита выхода обычно используется для предотвращения внезапного ухода пользователей без сохранения изменений. Навигацию можно отменить с помощью next(false).

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

Полный процесс анализа навигации

  1. Триггер на другие маршруты
  2. Вызвать охрану компонента, чтобы уйти с маршрутаbeforeRouteLeave
  3. Вызвать глобальную предварительную защитуbeforeEach
  4. Вызывается в повторно используемом компонентеbeforeRouteUpdate
  5. Вызывается в конфигурации маршрутизацииbeforeEnter
  6. Анализ компонентов асинхронной маршрутизации
  7. Вызывается в компоненте маршрутизации, который будет введенbeforeRouteEnter
  8. Вызвать глобальную защиту синтаксического анализаbeforeResolve
  9. Навигация подтверждена
  10. Вызвать глобальный почтовый хукafterEach.
  11. Запустить обновление DOMmounted.
  12. воплощать в жизньbeforeRouteEnterпройти к охранникуnextфункция обратного вызова.

​


Статья постоянно обновляется каждую неделю, вы можете искать в WeChat "Особенности интерфейса"Прочтите это в первый раз, ответьте [видео】【книги】 Получите 200 ГБ видеоматериалов и 30 книг в формате PDF.



Категории