vue 项目中 src/permission.js中的前置路由守卫中 router.beforEach(async (to, from ,next) => { }) to, from, next 三个属性的详细含义和作用

在 Vue 项目的 src/permission.js 文件中，前置路由守卫（router.beforeEach）用于在路由跳转之前进行一些权限校验或其他逻辑处理。router.beforeEach 接收三个参数：to, from, next。它们的详细含义和作用如下：

to:

含义: 表示即将进入的路由对象。
作用: 通过这个参数可以获取到目标路由的相关信息，例如路由名称、路径、参数等。
示例:to.name // 获取目标路由的名称
to.path // 获取目标路由的路径
to.params // 获取目标路由的动态参数
to.query // 获取目标路由的查询参数
登录后复制

from:

含义: 表示当前导航正要离开的路由对象。
作用: 通过这个参数可以获取到当前路由的相关信息，例如路由名称、路径、参数等。
示例:from.name // 获取当前路由的名称
from.path // 获取当前路由的路径
from.params // 获取当前路由的动态参数
from.query // 获取当前路由的查询参数
登录后复制

next:

含义: 一个函数，用于决定路由导航的下一步。
作用: 通过调用 next 函数，可以控制路由导航的流程。例如，直接进入目标路由、取消导航、重定向到其他路由等。
示例:next() // 直接进入目标路由
next(false) // 取消导航
next('/') // 重定向到首页
next({ name: 'Home' }) // 重定向到指定路由
登录后复制

通过这三个参数，可以在路由跳转之前进行各种逻辑处理，例如权限校验、登录状态检查、动态路由添加等。