深入理解 Vue Router 源码中导航守卫中 `next()` 参数的不同用法在源码中的处理逻辑。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

导航守卫 `next()` 的奇妙冒险：Vue Router 源码解密

大家好！我是今天的导游，哦不，讲师。今天我们要一起深入 Vue Router 的源码，探索导航守卫中 next() 这个神秘参数的各种用法，看看它在源码中是如何被“调戏”的，咳咳，是如何被处理的。

大家都知道，Vue Router 的导航守卫允许我们在路由切换的不同阶段进行拦截和控制。而 next() 函数，则是我们掌握“生杀大权”的关键。它就像一把钥匙，决定了路由是否继续前进。

但是，next() 可不是一把简单的钥匙，它有各种各样的用法，每种用法都会产生不同的效果。接下来，我们就来逐一解开这些谜题。

一、next()：最简单的通行证

最简单的用法，就是直接调用 next()，不带任何参数。这就像告诉 Vue Router：“没问题，放行！让它去吧！”

// 路由守卫示例
router.beforeEach((to, from, next) => {
  // 一些逻辑判断...
  console.log('路由即将进入:', to.path);
  next(); // 允许路由继续前进
});

在 Vue Router 的源码中，当遇到 next() 并且没有参数时，它会执行以下操作 (简化版):

// 源码简化版 - _next 方法内部逻辑
function _next(params) {
  if (params === undefined) {
    // 继续执行下一个守卫或进入路由
    step();
  } else {
    // 其他情况 (带参数的 next())
  }
}

function step() {
  if (index >= queue.length) {
    // 所有守卫都执行完毕，进入路由
    resolve(to);
  } else {
    // 执行下一个守卫
    const hook = queue[index++];
    hook(to, from, next);
  }
}

step() 函数负责执行下一个守卫。如果所有守卫都执行完毕，它就会调用 resolve(to)，最终完成路由的导航。

二、next(false)：紧急刹车

next(false) 的作用是取消当前导航。就像你突然发现走错了路，赶紧踩下刹车，停止前进。

router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (!isLoggedIn()) {
    console.log('用户未登录，阻止路由');
    next(false); // 阻止路由继续前进
  } else {
    next();
  }
});

在源码中，next(false) 会导致导航被中断，不会执行后续的守卫或进入路由。

// 源码简化版 - _next 方法内部逻辑
function _next(params) {
  if (params === undefined) {
    // ...
  } else if (params === false) {
    // 中断导航
    abort(createNavigationCancelledError(to, from));
  } else {
    // ...
  }
}

function abort(error) {
  reject(error); // 使用 reject 拒绝 Promise，中断导航
}

abort() 函数会创建一个 NavigationCancelledError 错误，并使用 reject 拒绝 Promise，从而中断导航过程。

三、next('/path') 或 next({ path: '/path' })：乾坤大挪移

next('/path') 或 next({ path: '/path' }) 的作用是重定向到另一个路由。就像你发现这条路堵车了，赶紧换一条路走。

router.beforeEach((to, from, next) => {
  // 如果用户尝试访问需要登录的页面，但未登录，则重定向到登录页面
  if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn()) {
    console.log('用户未登录，重定向到登录页面');
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 将当前路由作为 query 参数传递给登录页面
    });
  } else {
    next();
  }
});

在这种情况下，next() 接收一个字符串路径或一个路由对象作为参数。Vue Router 会创建一个新的路由导航，并取消当前的导航。

// 源码简化版 - _next 方法内部逻辑
function _next(params) {
  if (params === undefined) {
    // ...
  } else if (params === false) {
    // ...
  } else if (typeof params === 'string' || (typeof params === 'object' && params !== null)) {
    // 重定向到新的路由
    const nextRoute = resolveRoute(params, currentRoute, router.history.current, router);
    if (currentRoute.fullPath === nextRoute.fullPath && currentRoute.matched.length === nextRoute.matched.length) {
        // 避免无限循环重定向
        abort(createNavigationDuplicatedError(currentRoute, nextRoute));
    } else {
        router.push(nextRoute); // 触发新的路由导航
    }
    abort(createNavigationRedirectedError(currentRoute, nextRoute));
  } else {
    // ...
  }
}

function resolveRoute(route, current, base, router) {
    // ... 解析 route 参数，生成新的路由对象
    return normalizedRoute;
}

resolveRoute() 函数会解析 params 参数，将其转换为一个标准的路由对象。然后，router.push() 会触发一个新的路由导航。同时，abort() 会中断当前的导航，并抛出一个 NavigationRedirectedError 错误。

四、next(error)：报错处理

next(error) 的作用是将错误传递给全局的错误处理程序。就像你在路上遇到了坑，需要告诉相关部门来处理。

router.beforeEach((to, from, next) => {
  // 模拟一个异步操作
  setTimeout(() => {
    try {
      // 可能会发生错误的代码
      // ...
      if (Math.random() < 0.5) {
        throw new Error('发生了一个随机错误');
      }
      next();
    } catch (error) {
      console.error('导航守卫中发生错误:', error);
      next(error); // 将错误传递给全局错误处理程序
    }
  }, 100);
});

router.onError((error) => {
  console.error('全局错误处理:', error);
  // 在这里可以进行错误上报、页面跳转等操作
});

在源码中，next(error) 会将错误传递给 router.onError 注册的错误处理程序。

// 源码简化版 - _next 方法内部逻辑
function _next(params) {
  if (params instanceof Error) {
    triggerError(params);
  } else {
    // ...
  }
}

function triggerError(err) {
  if (router.onError) {
    router.onError(err);
  } else {
    console.error('Uncaught error during route navigation:');
    console.error(err);
  }
}

triggerError() 函数会调用 router.onError 注册的错误处理程序，并将错误作为参数传递给它。如果没有注册 router.onError , 就会直接打印到控制台。

五、next(vm => { ... })：访问 Vue 实例

这种用法比较少见，但是它允许你在导航完成之后访问 Vue 实例。就像你终于到达了目的地，可以开始做一些初始化工作。 （注意：这种用法在 Vue Router 4 中已经被移除）

// Vue Router 3 的用法 (已废弃)
router.afterEach((to, from) => {
  next(vm => {
    // vm 是 Vue 实例
    console.log('Vue 实例:', vm);
    // 可以在这里执行一些与 Vue 实例相关的操作
  });
});

这种用法在 Vue Router 3 的源码中，会先完成路由导航，然后将 Vue 实例作为参数传递给 next() 接收的函数。

总结：next() 的用法一览

为了方便大家记忆，我把 next() 的各种用法整理成一个表格：

用法	作用	源码中的处理方式
`next()`	允许路由继续前进	调用 `step()` 函数，执行下一个守卫或进入路由。
`next(false)`	中断当前导航	调用 `abort()` 函数，创建一个 `NavigationCancelledError` 错误，并使用 `reject` 拒绝 Promise，中断导航。
`next('/path')`	重定向到另一个路由（字符串路径）	调用 `resolveRoute()` 函数解析路径，然后使用 `router.push()` 触发新的导航，并调用 `abort()` 函数中断当前导航。
`next({ path: '/path' })`	重定向到另一个路由（路由对象）	同上。
`next(error)`	将错误传递给全局错误处理程序	调用 `triggerError()` 函数，触发 `router.onError` 注册的错误处理程序。
`next(vm => { ... })`	访问 Vue 实例 (Vue Router 3, 已废弃)	完成路由导航后，将 Vue 实例作为参数传递给 `next()` 接收的函数。

注意事项：

避免无限循环重定向： 在使用 next('/path') 重定向时，要避免重定向到当前路由，否则会导致无限循环。
错误处理： 务必处理导航守卫中可能发生的错误，可以使用 try...catch 语句捕获错误，并使用 next(error) 将错误传递给全局错误处理程序。
异步操作： 如果导航守卫中包含异步操作，请确保在异步操作完成之后再调用 next()，否则可能会导致路由行为异常。可以使用 async/await 语法来简化异步操作的处理。
Vue Router 版本： 注意 Vue Router 3 和 Vue Router 4 在 next() 的用法上有一些差异，特别是 next(vm => { ... }) 已经被移除。

源码调试技巧：

如果你想更深入地了解 next() 在 Vue Router 源码中的处理逻辑，可以使用浏览器的开发者工具进行调试。

在你的 Vue 项目中，找到 node_modules/vue-router/dist/vue-router.esm.js 文件（或者 vue-router.js，具体取决于你的构建工具）。
打开开发者工具，切换到 "Sources" (或 "Sources 面板").
在 vue-router.esm.js 文件中，找到 _next 函数 (或类似的函数，具体取决于 Vue Router 的版本).
在 _next 函数中设置断点，然后刷新你的 Vue 应用。
当路由切换触发导航守卫时，断点会被命中，你可以逐步执行代码，查看 next() 的参数是如何被处理的。

通过调试源码，你可以更直观地理解 next() 的工作原理，并更好地掌握 Vue Router 的使用技巧。

总结：

next() 函数是 Vue Router 导航守卫的核心，掌握它的各种用法对于编写健壮的路由控制逻辑至关重要。通过深入理解源码，我们可以更好地利用 next() 来实现各种复杂的路由需求。

希望今天的分享能帮助大家更深入地理解 Vue Router 的导航守卫，并在实际项目中灵活运用 next() 函数。谢谢大家！下课！记得点赞！（手动狗头）

导航守卫 next() 的奇妙冒险：Vue Router 源码解密

发表回复 取消回复

导航守卫 `next()` 的奇妙冒险：Vue Router 源码解密

发表回复取消回复