Vue Router 导航守卫，多次执行的解决方案

Vue Router 是 Vue.js 官方提供的路由器，它用于处理单页应用（SPA）中的路由导航。在 Vue Router 中，导航守卫是非常重要的功能，它可以在路由跳转之前或之后执行一些特定的操作。但是，如果你不小心，导航守卫可能会多次执行，这可能会导致一些问题。本文将介绍如何避免导航守卫多次执行，并提供解决方案。

导航守卫的基本概念

在 Vue Router 中，导航守卫分为四个阶段：beforeEach、beforeEnter、afterEach 和 afterEnter。它们分别在导航开始、进入路由组件、导航完成和路由组件加载完成后执行。

• beforeEach：在每条路由的进入之前执行，且仅对当前路由有效。
• beforeEnter：在进入路由组件之前执行，且仅对当前路由有效。
• afterEach：在每条路由的完成之后执行，且仅对当前路由有效。
• afterEnter：在路由组件加载完成之后执行，且仅对当前路由有效。

避免多次执行的陷阱

有时，我们需要在路由守卫中执行一些操作，例如检查用户是否已登录。如果我们在每个路由的 beforeEach 守卫中执行这个操作，就可能会出现问题。因为每次导航时，都会执行 beforeEach 守卫，即使路由没有改变，也会重新执行。这就导致了操作被多次执行，可能会导致一些问题。

举个例子，假设我们在 beforeEach 守卫中检查用户是否登录，如果未登录，则跳转到登录页面。如果用户在登录页面已经登录，但未完成登录操作就关闭了页面，再次打开页面时，由于 beforeEach 守卫会多次执行，会导致用户再次被重定向到登录页面，这就不是我们想要的结果。

实际项目中的陷阱

...省略代码router.afterEach((</