vue.js - 如果目标重定向解析为相同的路径，则不调用 Vue 路由器 beforeEach

Question

我在使用时遇到问题 router.push('/')作为注销的最后一步。

如果我从 / 的同一路线触发注销程序redirect s 到，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

router.beforeEach守卫似乎只在检测到导航变化时才运行。由于路线与您的情况相同，因此您必须通过在预期路线之前推送不同的路线路径来强制更改导航。预先推一个空的空间效果很好。这无疑是 hacky。

例如:

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

demo