Vue Router 前置守卫中，如何解决使用 SPA 时的嵌套路由问题-JavaScript中文网-JavaScript教程资源分享门户

在Vue开发中，Vue Router是一个非常常用的路由管理工具。在单页应用（SPA）开发中，我们常常会遇到嵌套路由问题，例如在一个父路由下，有多个层级的子路由，而每一级子路由都需要进行登录验证等操作。这时候我们就需要使用Vue Router前置守卫来解决这个问题。

Vue Router前置守卫

Vue Router提供了多种路由守卫，其中包括全局前置守卫（beforeEach）、全局解析守卫（beforeResolve）、全局后置钩子（afterEach）等。前置守卫会在路由跳转前执行，它能够用于权限控制、登录验证等操作。我们可以在前置守卫中对路由进行判断，然后根据不同的情况来进行不同的处理。

具体实现方式如下：

const router = new VueRouter({
  routes: [...],
})
router.beforeEach((to, from, next) => {
  // 权限控制、登录验证等操作
  // 如果需要跳转到登录页，可以使用next('/login')
  // 如果无需操作，直接使用next()即可
})

嵌套路由问题

在开发SPA时，嵌套路由是经常会遇到的问题。假设我们有一个嵌套路由结构如下：

- /parent
  - /child1
    - /grandchild1
    - /grandchild2
  - /child2
    - /grandchild3
    - /grandchild4

在这个嵌套路由结构中，/parent是父级路由，/child1、/child2是/parent的子路由，/grandchild1、/grandchild2、/grandchild3、/grandchild4是/child1、/child2的子路由。

我们需要对每个子路由进行登录验证，如果未登录则需要跳转到登录页。但是如果我们只在每个子路由上添加前置守卫，用户从/parent跳转到/child1时，只会执行/child1上的前置守卫，而不会执行/parent上的前置守卫。这就会导致在用户从/parent跳转到/child1时，如果未登录，则无法实现跳转到登录页的操作。

如何解决这个问题呢？我们可以使用递归的方式，在每个子路由的前置守卫中逐级调用父级路由的前置守卫，直到到达根路由为止。具体实现方式如下：

// javascriptcn.com 代码示例
// 子路由的前置守卫
const childBeforeEnter = (to, from, next) => {
  if (isLogin()) {
    // 已登录
    next()
  } else {
    // 未登录
    next('/login')
  }
}

// 递归调用父级路由的前置守卫
const parentBeforeEnter = (to, from, next) => {
  const matched = to.matched
  const last = matched[matched.length - 1]
  if (last && last.components.default.beforeRouteEnter) {
    last.components.default.beforeRouteEnter(to, from, () => {
      next()
    })
  } else {
    next()
  }
}
const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      beforeEnter: parentBeforeEnter, // 父级路由的前置守卫
      children: [
        {
          path: 'child1',
          component: Child1,
          beforeEnter: childBeforeEnter, // 子路由的前置守卫
          children: [
            {
              path: 'grandchild1',
              component: Grandchild1,
              beforeEnter: childBeforeEnter, // 孙路由的前置守卫，同子路由
            },
            {
              path: 'grandchild2',
              component: Grandchild2,
              beforeEnter: childBeforeEnter, // 孙路由的前置守卫，同子路由
            },
          ],
        },
        {
          path: 'child2',
          component: Child2,
          beforeEnter: childBeforeEnter, // 子路由的前置守卫
          children: [
            {
              path: 'grandchild3',
              component: Grandchild3,
              beforeEnter: childBeforeEnter, // 孙路由的前置守卫，同子路由
            },
            {
              path: 'grandchild4',
              component: Grandchild4,
              beforeEnter: childBeforeEnter, // 孙路由的前置守卫，同子路由
            },
          ],
        },
      ],
    },
  ],
})

在以上示例代码中，我们对/parent、/child1、/child2、/grandchild1、/grandchild2、/grandchild3、/grandchild4这7个路由都添加了前置守卫。对于/parent路由，我们使用parentBeforeEnter函数作为其前置守卫，在该函数中递归调用父级路由的前置守卫。对于子路由/child1、/child2以及孙路由/gradchild1、/grandchild2、/grandchild3、/grandchild4，我们使用childBeforeEnter函数作为它们的前置守卫，用于进行登录验证，如果未登录则跳转到登录页。

总结

在单页应用（SPA）中，嵌套路由是经常会遇到的问题。为了实现登录验证等操作，我们需要在每个子路由上添加前置守卫。但是仅仅在子路由上添加前置守卫，无法解决从父级路由跳转到子路由时的登录验证问题。因此我们需要使用递归的方式，在每个子路由的前置守卫中逐级调用父级路由的前置守卫，以实现从父级路由跳转到子路由时的登录验证操作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6532232c7d4982a6eb462b55