如果目标重定向解析为相同的路径，则不会调用 Vue 路由器 beforeEach答案

【问题标题】：Vue router beforeEach not called if destination redirect resolves to same path如果目标重定向解析为相同的路径，则不会调用 Vue 路由器 beforeEach
【发布时间】：2018-10-07 08:33:10
【问题描述】：

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

如果我从/ redirects 到的同一路由触发注销过程，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 上进行评估？

【问题讨论】：

为什么要在注销时推送相同的路径？你不应该推送登录路径吗？那肯定会触发router.beforeEach，因为路径实际上会有所不同。
我希望用户进入主页，而不是登录页面...

标签： vue.js vuejs2 vue-router

【解决方案1】：

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

例如：

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

demo

【讨论】：

这几乎就是我现在所做的，但它确实感觉更像是一个 hack，而不是一个干净的解决方案。可以选择触发对路线或其他东西的强制评估......

【解决方案2】：

创建一个重定向到/ 路由的/logout 路由。

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

【讨论】：