router.beforeEach

最新推荐文章于 2025-06-17 11:57:12 发布

郭宝

最新推荐文章于 2025-06-17 11:57:12 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/92769090

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了Vue Router的beforeEach全局钩子函数，用于在路由切换前执行，常用于页面进度条加载、设置页面标题和用户登录状态检查等操作。并简单说明了其基本使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

router.beforeEach 是什么？

router.beforeEach 是全局钩子函数，它是在路由跳转之前所调用的函数，在实际开发中页面进度条的加载、设置页面标题、判断用户是否已经登录过了等等都可以在该函数中执行。

router.beforeEach 怎么使用？

常规用法如下：

/**
to 表示oruter即将进入的路由对象
from 表示当前即将离开的路由对象
next 通过该函数可以重新定义要跳转的路由路径。常用示例：next({ path: '/' }) 表示跳转到重定向页面
*/
router.beforeEach(async(to, from, next) => {
  // 开始进度

  console.log('to.meta.title:' + to.meta.title)
  // to.meta.title:Guide 获取的是跳转的页面名称
  //  设置页面顶部标题
  //document.title = getPageTitle(to.meta.title)

  // 确定用户是否已登录


})

/**
 * 路由跳转之后执行该函数
 */
router.afterEach(() => {
    //结束进度
})