Vue-router 是 Vue.js 官方的路由管理器,它允许我们在应用中使用导航功能。导航守卫是 Vue-router 提供的一种机制,用于在路由导航过程中控制页面的访问权限和执行相关操作。
在 Vue-router 中,导航守卫可以分为全局守卫和路由独享守卫。全局守卫会在每个路由导航中都起作用,而路由独享守卫只会在特定的路由配置中起作用。
Vue-router 提供了三种全局守卫:
-
beforeEach
:在每个路由导航之前调用。我们可以在该导航守卫中进行一些前置操作,比如验证用户是否已登录或是否具有访问权限。 -
beforeResolve
:在每个路由导航之前调用,且在beforeEach
守卫之后调用。它会在路由被确认之前加载异步组件或解析异步路由组件。 -
afterEach
:在每个路由导航成功完成后调用。我们可以在该导航守卫中执行一些后置操作,比如页面的统计或日志记录。
除了全局守卫,Vue-router 还提供了两种路由独享守卫:
-
beforeEnter
:在单个路由配置中定义。它与beforeEach
的作用相同,但只会在特定的路由上起作用。 -
befo