全面解析 Vue Router 中的 $route、$router 与全局导航守卫

前端

2024-02-07 16:07:23

route 与 router 的概念与区别

在 Vue Router 中，route 和 router 是两个重要的属性，它们为我们提供了操作路由和获取路由信息的能力。

$route ：它代表当前激活的路由对象，包含当前路由的所有信息，如路径、参数、查询参数、元数据等。
$router ：它是 Vue Router 创建的路由实例，它为我们提供了操作路由和获取路由信息的能力，例如，我们可以通过它来获取当前路由、跳转到新路由、添加或删除路由等。

route 和 router 的主要区别包括：

route** 是一个只读对象，而 **router 是一个可操作的对象。
route** 只能在当前路由组件中使用，而 **router 可以全局使用。
route** 包含当前路由的信息，而 **router 包含所有路由的信息。

全局导航守卫

全局导航守卫是 Vue Router 提供的一个强大功能，它允许我们在路由发生变化时进行拦截和处理。全局导航守卫有三种类型：

beforeEach ：在导航开始前被调用，可以取消或修改导航。
beforeResolve ：在导航完成解析前被调用，可以取消或修改导航。
afterEach ：在导航完全完成之后被调用。

全局导航守卫的实现

全局导航守卫可以通过 Vue.use() 函数注册，代码示例如下：

Vue.use({
  install: function (Vue) {
    Vue.mixin({
      beforeCreate() {
        const router = this.$router

        router.beforeEach((to, from, next) => {
          // 导航逻辑
          // ...

          next()
        })

        // 其他导航守卫
        // ...
      }
    })
  }
})

全局导航守卫的注意事项

在使用全局导航守卫时，需要注意以下几点：

全局导航守卫是一个异步函数，需要使用 next() 函数显式地继续导航。
全局导航守卫可以返回一个布尔值或一个 Promise 对象，如果返回 false 或 Promise 对象被拒绝，则导航将被取消。
全局导航守卫可以访问 to、from 和 next 三个参数：
- to：目标路由对象。
- from：当前路由对象。
- next：继续导航的函数。