如何实现 vue 路由拦截

在 Vue 项目开发中，路由拦截是一项非常重要的功能，它能够帮助我们在用户访问特定路由之前进行一些必要的逻辑判断，比如权限验证、页面加载前的数据预取等。下面将详细介绍如何在 Vue 中实现路由拦截。

Vue 路由拦截主要通过路由守卫来实现。路由守卫是 Vue Router 提供的一种机制，它允许我们在路由切换的不同阶段执行特定的代码。

首先是全局前置守卫 beforeEach。我们可以在 router/index.js 文件中进行设置。例如：

import Router from 'vue-router'
const router = new Router({
  // 路由配置
})

router.beforeEach((to, from, next) => {
  // to: 即将要进入的目标路由对象
  // from: 当前导航正要离开的路由
  // next: 函数，调用该函数来决定是否继续导航
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth &&!isAuthenticated) {
    // 如果目标路由需要权限且用户未登录，重定向到登录页面
    next('/login')
  } else {
    next()
  }
})

export default router

在上述代码中，我们通过 beforeEach 守卫检查每个路由切换。如果目标路由的 meta 字段中有 requiresAuth 且用户未登录（通过检查 localStorage 中的 token 判断），则将用户重定向到登录页面。

除了全局前置守卫，还有路由独享守卫。在定义路由时直接配置，如：

const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      const isAdmin = localStorage.getItem('role') === 'admin'
      if (isAdmin) {
        next()
      } else {
        next('/')
      }
    }
  }
]

这种方式适用于对特定路由进行单独的拦截逻辑处理。

组件内守卫则是在组件内部定义，比如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。以 beforeRouteEnter 为例：

export default {
  name: 'MyComponent',
  beforeRouteEnter (to, from, next) {
    // 这里不能使用this，因为组件实例还未创建
    next(vm => {
      // 通过vm访问组件实例
      vm.fetchData()
    })
  }
}

通过合理运用这些不同类型的路由守卫，我们可以灵活地实现各种复杂的路由拦截需求，为 Vue 应用提供更完善的用户体验和安全保障。