Vue router beforeEach не вызывается, если перенаправление назначения разрешается по тому же пути

Question

У меня проблема при использовании router.push('/') в качестве последнего шага выхода из системы.

Если я запускаю процедуру выхода из системы с того же маршрута, по которому / redirect с, router.beforeEach не будет запущен и, следовательно, не перенаправит пользователя на /login, но все равно покажет маршрут, который должен быть виден только зарегистрированным пользователям (которого пользователь больше не видит в конце процедуры выхода из системы).

{
  path: '/',
  redirect: 'foo'
},
{
  path: '/foo',
  name: 'foo',
  component: Foo,
  meta: {
    requiresAuth: true
  }
},

и

router.beforeEach((to, from, next) => {
  ...
  if(to.requiresAuth && userLoggedIn == false) 
    next('/login')
  ...

Так что, если я инициирую выход из системы с любого маршрута, кроме /foo, он будет работать как положено, но если я вызову его с /foo, пользователь будет не перенаправлено на /login.

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

Как я могу гарантировать, что мои beforeEach охранники маршрута будут оцениваться на каждые router.push/replace?

Answer 1

Создание маршрута /logout, который перенаправляет на маршрут /.

Бонус: отображение приятного сообщения с надписью "Успешно завершено" и перенаправление через пару секунд.

Answer 2

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

Например:

<button @click="$router.push(' '); $router.push('/')">Logout</button>

демо