Vue Router 是 Vue.js 官方的路由管理器，它可以轻松地将 Vue.js 应用程序的视图层划分为多个路由，从而实现组件化开发方式下的页面跳转与数据共享。
Vue Router 提供了很多生命周期钩子函数，让我们可以在路由状态变化的不同阶段进行相应的操作，如登录验证、前置条件检查等。
本篇文章将通过对 Vue Router 路由钩子函数的分析和举例，来探索它们的不同用法和特点，有助于您更好地利用 Vue Router 构建高质量、高效的单页应用程序。
Vue Router 中的三类钩子函数
Vue Router 的路由钩子函数可以分为全局钩子、路由级别钩子以及组件级别钩子，下面我们分别来介绍一下它们的用法和作用：
全局钩子
全局钩子包括 beforeEach、beforeResolve 和 afterEach。
其中，beforeEach 钩子函数会在每个路由导航开始前被调用，可以用来做登录验证、权限控制等前置条件判断：
router.beforeEach((to, from, next) => {
// 获取当前登录状态
const isLogin = localStorage.getItem('token') ? true : false;
// 如果已登录或访问的是登录页，继续路由导航；否则跳转至登录页
isLogin || to.name === 'login' ? next() : next('/login');
});beforeResolve 钩子函数会在所有路由组件内的钩子函数都调用完之后被调用，但在渲染组件之前，可以用来做数据预加载、异步请求等：
router.beforeResolve((to, from, next) => {
// 在组件渲染之前，预加载数据
fetchData(to.data).then(() => next());
});afterEach 钩子函数会在每个路由导航完成后被调用，可以用来做一些页面跟踪、性能分析等操作：
router.afterEach((to, from) => {
// 发送浏览数据到统计平台
sendLog(to.path);
});全局钩子函数的触发顺序是：beforeEach → beforeResolve → 组件路由钩子函数 → afterEach。
路由级别钩子
路由级别钩子包括每个路由对象上的 beforeEnter 钩子函数。它只会在当前路由对象上触发一次，可以用来做一些局部的前置条件判断：
-- -------------------- ---- -------
----- ----- - -
----- -------------
---------- ----------
------------ ---- ----- ----- -- -
-- --------
----- ------- - ----------------------------- - ---- - ------
-- ---------------------
------- - ------ - ---------------
-
-组件级别钩子
组件级别钩子包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。
其中，beforeRouteEnter 钩子函数会在路由组件渲染之前被调用，此时无法访问实例的 this，但可以通过回调函数访问组件实例：
-- -------------------- ---- -------
----- ----------- - -
--------- -
-- ---- -------- ------
----------------------------------- -- ---------
--
-------------------- ----- ----- -
-- -------- --- --
------- -- -
---------------------------------
-- ----------- --------- -------- -------
--------------- -- -
--------------------
---
---
-
-beforeRouteUpdate 钩子函数会在当前路由组件复用时被调用，例如从 /dashboard/1 跳转到 /dashboard/2。在该钩子中，我们可以根据不同的路由参数实现动态渲染：
-- -------------------- ---- -------
----- ----------- - -
--------- -
-- ------
----------------------------------- -- -
--
--------------------- ----- ----- -
-- ----- -- -------
-- ------------- --- --------------- -
------------------------------- -- --------
- ---- -
-------
-
-
-beforeRouteLeave 钩子函数会在当前路由组件被离开前被调用，可以用来做一些离开前的确认操作：
-- -------------------- ---- -------
----- ----------- - -
--------- -
-- ------
----------------------
--
-------------------- ----- ----- -
-- --------------
-- -------------------- -
-- ------------------
-------------------------- -- --------
- ---- -
-- ------------------
------------
-
-
-总结
Vue Router 的路由钩子函数可以让我们在路由状态变化的不同阶段进行相应的操作，从而实现登录验证、前置条件检查、数据预加载等功能。本文针对全局钩子、路由钩子和组件钩子三类钩子函数进行了详细介绍，并通过举例说明了它们的具体用法和特点。在实际开发中，我们需要综合运用这些钩子函数，以达到高效、优质的应用程序构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64866e5148841e98944fd9a4