一、router.beforeEach是干啥的？核心作用是什么？

做Vue项目时,路由权限控制、页面跳转前的拦截处理这些需求很常见，而Vue Router里的router.beforeEach就是解决这类问题的关键工具，但不少同学刚接触时，要么搞不清它的用法，要么遇到next调用报错、权限判断循环这些坑，今天就把router.beforeEach的作用、用法、场景、避坑点一次性讲透，帮你在项目里灵活用上它～

可以把Vue Router的导航守卫理解成“路由跳转过程中的钩子”，而router.beforeEach是**全局前置守卫**——意思是“只要有路由跳转行为，就会先经过它的‘检查’”，它的核心价值是在路由真正完成跳转前，实现权限拦截、数据准备、页面拦截等逻辑，举几个常见场景感受下： - 用户没登录却想进个人中心？用beforeEach拦截，强制跳转到登录页； - 跳转前给页面加个加载动画，让用户感知“页面在切换”； - 不同路由显示不同网页标题（比如商品列表页显示“商品列表”，详情页显示“商品详情”）； - 用户表单填了一半突然要跳走？用beforeEach弹个确认框，防止数据丢失。

router.beforeEach就像路由跳转前的“看门人”，决定“让不让跳”“往哪跳”。

基础用法：代码怎么写？三个参数啥意思？

router.beforeEach的基本语法长这样：

router.beforeEach((to, from, next) => {
  // 这里写拦截逻辑
  next() // 必须调用！不调用路由会“卡死”
})

下面拆解三个参数和核心逻辑：

参数：to、from、next分别是啥？

• to：目标路由对象（即将跳转到哪个页面），里面包含to.path（目标路径）、to.meta（路由元信息，开发者自定义的额外数据，比如是否需要权限、页面标题等）等关键属性；
• from：当前路由对象（从哪个页面跳过来），结构和to一致；
• next：控制路由走向的函数，必须调用！不调用的话，路由跳转流程会卡住，页面永远不更新。

next的不同用法（决定路由咋走）

next函数的调用方式决定了路由的最终行为：

• next()：正常“放行”，路由按原本配置的规则跳转；
• next('/login')：强制跳转到指定路径（也能传路由对象，比如next({ name: 'Login' })，更灵活）；
• next(false)：取消跳转，留在当前页面。

写个“权限控制”的简单例子

假设我们用localStorage存登录态,给需要登录的路由加meta.requireAuth标记，代码逻辑如下：

// router/index.js 中配置beforeEach
router.beforeEach((to, from, next) => {
  // 检查目标路由是否需要登录
  if (to.meta.requireAuth) { 
    // 从localStorage取token，判断是否登录
    const token = localStorage.getItem('token')
    if (token) {
      next() // 有token，放行
    } else {
      next('/login') // 没token，跳登录页
    }
  } else {
    next() // 不需要登录的页面，直接放行
  }
})
// 路由配置（示例）
const routes = [
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta: { requireAuth: true } // 标记该页面需要登录
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { requireAuth: false } // 登录页不需要登录
  }
]

实际项目里，哪些场景必须用router.beforeEach？

结合真实开发需求,这些场景几乎离不开router.beforeEach：

复杂权限控制（后台系统高频需求）

后台管理系统中,不同角色能访问的页面不同（普通员工”看不到“权限管理”页面，“管理员”才能看），这时用beforeEach结合路由meta和用户角色做判断：

router.beforeEach(async (to, from, next) => {
  // 假设用户角色存在Vuex里，先获取角色
  const userRole = store.state.user.role 
  // 目标路由需要的角色，提前存在meta里
  const requiredRole = to.meta.requiredRole 
  if (to.meta.requireAuth) {
    if (userRole === requiredRole) {
      next() // 角色匹配，放行
    } else {
      next('/403') // 权限不足，跳403页面
    }
  } else {
    next()
  }
})
// 路由配置示例（管理员专属页面）
{
  path: '/permission',
  component: Permission,
  meta: { 
    requireAuth: true, 
    requiredRole: 'admin' // 只有管理员能进
  }
}

页面跳转前的“挽留”（表单未保存提示）

用户填了一半表单,突然点其他路由想跳走？用beforeEach拦截，弹框确认是否离开：

router.beforeEach((to, from, next) => {
  // 假设表单“是否修改未保存”的状态存在Vuex里
  const isFormDirty = store.state.form.isDirty 
  // 要跳走，且不是跳回表单页本身
  if (isFormDirty && to.name !== 'FormPage') { 
    const confirm = window.confirm('表单还没保存，确定要离开吗？')
    if (confirm) {
      next() // 确定离开，放行
    } else {
      next(false) // 取消离开，留在当前页
    }
  } else {
    next()
  }
})

动态设置网页标题（提升SEO和体验） 不一样？用beforeEach读取路由meta.title，动态设置document.title：

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title // 设置网页标题
  } else {
    document.title = '默认标题' // 兜底逻辑
  }
  next()
})
// 路由配置示例
{
  path: '/product',
  component: ProductList,
  meta: { title: '商品列表 - 我的商城' }
}

全局加载状态管理

路由跳转时显示loading动画,跳转完成后隐藏，beforeEach负责“启动loading”，配合全局后置守卫afterEach负责“关闭loading”：

router.beforeEach((to, from, next) => {
  store.commit('setLoading', true) // 开启loading动画
  next()
})
router.afterEach(() => {
  store.commit('setLoading', false) // 跳转完成，关闭loading
})

router.beforeEach和其他导航守卫有啥区别？别用混了！

Vue Router的导航守卫分全局、路由独享、组件内三类，用法和触发时机差异很大，用混了容易逻辑混乱。

全局后置守卫：router.afterEach

和beforeEach对应,是“全局后置守卫”——路由跳转完成后触发，没有next函数（因为跳转已经结束了），适合做“跳转后清理”，比如关闭loading、统计页面访问量：

router.afterEach((to, from) => {
  // 统计页面访问：给后端发请求记录to.path
  axios.post('/api/visit', { path: to.path })
})

路由独享守卫：beforeEnter

写在单个路由配置里，只对当前路由生效，比如某个页面不管从哪跳过来，都要做特定检查：

const routes = [
  {
    path: '/order',
    component: Order,
    // 只对/order路由生效的守卫
    beforeEnter: (to, from, next) => {
      // 比如检查订单状态
      if (orderStatus === 'paid') {
        next()
      } else {
        next('/order-confirm')
      }
    }
  }
]

组件内守卫：beforeRouteEnter、beforeRouteUpdate等

写在组件内部（比如Order.vue里），只对当前组件的路由变化生效，比如组件复用（同一路由，参数变化，比如从/order/1到/order/2）时，用beforeRouteUpdate更新数据：

export default {
  name: 'Order',
  // 组件实例创建前触发（this是undefined），适合提前请求数据
  beforeRouteEnter(to, from, next) {
    axios.get('/api/order/' + to.params.id).then(res => {
      // next(vm => {}) 中vm是组件实例，可给data赋值
      next(vm => { 
        vm.orderData = res.data
      })
    })
  },
  // 组件复用、参数变化时触发（this已存在）
  beforeRouteUpdate(to, from, next) {
    this.orderData = null // 清空旧数据
    axios.get('/api/order/' + to.params.id).then(res => {
      this.orderData = res.data
      next() // 数据更新后放行
    })
  }
}

不同守卫的适用场景

• beforeEach：全局！所有路由跳转前都触发；
• afterEach：全局！所有路由跳转后触发；
• beforeEnter：只对单个路由生效；
• 组件内守卫：只对当前组件的路由变化生效。

用router.beforeEach时，这些坑你肯定踩过！（避坑指南）

新手最容易栽在这些细节上,逐个分析解决：

next调用多次，控制台报错

问题：如果在条件判断里多次调用next，

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    next('/login') // 这里调了next
  }
  next() // 又调了一次next！
})

后果：Vue Router会报错“NavigationDuplicated”，因为路由导航被触发了多次。

解决：用if...else或者return next()确保next只调一次：

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    return next('/login') // return后，下面的next不会执行
  }
  next()
})

异步操作没等完，next提前执行

场景：需要等接口返回（比如获取用户角色）后再判断权限，但没处理异步，导致next在接口还没返回时就执行了。

错误示例：

router.beforeEach((to, from, next) => {
  // 假设getUserRole是异步接口
  api.getUserRole().then(role => {
    store.commit('setRole', role)
  })
  // 这里next会直接执行，没等接口返回！
  next() 
})

解决：用async/await处理异步，确保拿到结果后再next：

router.beforeEach(async (to, from, next) => {
  const role = await api.getUserRole() // 等接口返回
  store.commit('setRole', role)
  next() // 拿到角色后再放行
})

路由循环（无限跳转）

场景：权限判断逻辑写反了，用户没登录就跳登录页”，但登录页的meta也配了requireAuth: true，导致循环跳转。

错误路由配置：

const routes = [
  {
    path: '/login',
    component: Login,
    meta: { requireAuth: true } // 登录页也要求登录？死循环！
  }
]

解决：给不需要权限的页面（比如登录、404）的meta设为false：

{
  path: '/login',
  component: Login,
  meta: { requireAuth: false } // 登录页不需要权限
}

meta信息没配置，动态标题/权限失效

场景：想通过to.meta.title，但路由里忘了配meta.title不生效。

解决：路由配置时，给每个需要自定义的页面加meta：

{
  path: '/about',
  component: About,
  meta: {  '关于我们', 
    requireAuth: false 
  }
}

进阶：结合Vuex/Pinia做更复杂的权限控制

实际项目中,权限可能不止“登录/没登录”，而是动态路由（不同角色能看到的路由不一样），这时beforeEach要结合状态管理库（Vuex或Pinia），动态添加路由。

举个动态加载路由的例子（假设用户角色是admin，需要额外加载权限管理路由）：

// 先定义基础路由（所有人都能看到的）
const basicRoutes = [
  { path: '/home', component: Home },
  { path: '/login', component: Login }
]
// 定义管理员专属路由
const adminRoutes = [
  { path: '/permission', component: Permission }
]
const router = createRouter({
  history: createWebHistory(),
  routes: basicRoutes
})
router.beforeEach(async (to, from, next) => {
  const user = store.state.user // 假设用户信息存在Vuex
  // 如果是第一次进入，且用户已登录，加载动态路由
  if (user.isLogin && !user.routesLoaded) { 
    if (user.role === 'admin') {
      // 把管理员路由添加到现有路由里
      adminRoutes.forEach(route => {
        router.addRoute(route) 
      })
    }
    store.commit('setRoutesLoaded', true) // 标记已加载，避免重复加
  }
  next()
})

这样,管理员登录后，/permission路由才会被添加，普通用户看不到这个路由（地址栏输入也进不去，因为路由不存在）。

掌握router.beforeEach，路由控制更丝滑

router.beforeEach作为Vue Router的核心工具，能帮我们在路由跳转前做各种“拦截+处理”，记住这几点，用起来更顺手：

• 它是全局前置守卫，所有路由跳转前必触发；
• 一定要调用next()，且只能调一次；
• 结合meta做权限、标题等自定义逻辑；
• 区分开其他导航守卫（afterEach、beforeEnter、组件内守卫）的用法；
• 避坑关键：别重复调next、处理好异步、防止路由循环。

实际项目里,把beforeEach和状态管理、动态路由结合起来，能实现复杂的权限控制和用户体验优化，多写几个demo（比如权限拦截、表单挽留、动态标题），你对它的理解会越来越深～

如果还有疑问（动态路由添加后页面没更新咋办？”“next('/login')后想传参数咋做？”），评论区留言，咱再深入唠～