之前的Vue路由器如果目标重定向解析为相同路径，则不会调用每个

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触发，则不将用户重定向到{{1 }}。

我想这可能是使路由尽可能高效的预期行为，但在这种情况下，这绝对不是我想要的。

如何确保在每个/login上对我的beforeEach路由守卫进行评估？

Answer 1

router.beforeEach防护似乎仅在检测到导航发生更改时才运行。由于您的路线相同，因此您必须在想要的路线之前推入另一条路线来强制进行导航更改。事先推动空白处效果很好。 这绝对是hacky。

例如：

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

demo

Answer 2

创建一条/logout路由，该路由重定向到/路由。

奖金：显示一条带有“成功注销”的好消息，并在几秒钟后重定向。