Vue-router 中的导航守卫

Vue-router 是 Vue.js 官方的路由管理器，它允许我们在应用中使用导航功能。导航守卫是 Vue-router 提供的一种机制，用于在路由导航过程中控制页面的访问权限和执行相关操作。

在 Vue-router 中，导航守卫可以分为全局守卫和路由独享守卫。全局守卫会在每个路由导航中都起作用，而路由独享守卫只会在特定的路由配置中起作用。

Vue-router 提供了三种全局守卫：

1. beforeEach：在每个路由导航之前调用。我们可以在该导航守卫中进行一些前置操作，比如验证用户是否已登录或是否具有访问权限。

2. beforeResolve：在每个路由导航之前调用，且在 beforeEach 守卫之后调用。它会在路由被确认之前加载异步组件或解析异步路由组件。

3. afterEach：在每个路由导航成功完成后调用。我们可以在该导航守卫中执行一些后置操作，比如页面的统计或日志记录。

除了全局守卫，Vue-router 还提供了两种路由独享守卫：

1. beforeEnter：在单个路由配置中定义。它与 beforeEach 的作用相同，但只会在特定的路由上起作用。

2. beforeRouteLeave：在离开当前路由时调用。我们可以在该导航守卫中执行一些操作，例如提示用户是否保存未保存的表单数据。

下面是一个示例代码，演示了如何使用导航守卫：