Vue-Router 是 Vue.js 官方的路由管理器，它能够帮助我们实现单页应用的路由管理。在 Vue-Router 中，路由钩子函数是一个十分重要的概念。本文将详细介绍 Vue-Router 的路由钩子函数，包括全局钩子函数、路由独享的钩子函数以及组件内的钩子函数，并结合实例代码进行讲解，帮助读者更好地理解 Vue-Router 的路由钩子函数。
全局钩子函数
全局钩子函数是指在整个应用中都会被调用的钩子函数，包括 beforeEach、afterEach 和 beforeResolve。这些钩子函数可以用于全局的路由拦截、权限控制等场景。
beforeEach
beforeEach 钩子函数会在每个路由跳转之前被调用，它接收三个参数：to、from 和 next。to 和 from 分别是即将要跳转的路由和当前的路由，next 是一个函数，用于控制路由跳转。
router.beforeEach((to, from, next) => {
// ...
next();
})在 beforeEach 钩子函数中，我们可以根据当前的路由信息进行一些逻辑处理，例如检查用户是否已经登录，如果未登录则跳转到登录页面：
-- -------------------- ---- -------
---------------------- ----- ----- -- -
-- --------------------- -- ------------------- -
------
----- ---------
------ - --------- ----------- -
---
- ---- -
-------
-
--上面的代码中，to.meta.requiresAuth 表示该路由是否需要登录才能访问，isAuthenticated() 是一个自定义的函数，用于检查用户是否已经登录。如果用户未登录且该路由需要登录，则跳转到登录页面，并在跳转后将当前路由信息作为查询参数传递给登录页面，以便登录后能够跳转回来。
afterEach
afterEach 钩子函数会在每个路由跳转之后被调用，它接收两个参数：to 和 from，分别表示即将要跳转的路由和当前的路由。
router.afterEach((to, from) => {
// ...
})在 afterEach 钩子函数中，我们可以进行一些与路由跳转相关的操作，例如记录用户的访问记录：
router.afterEach((to, from) => {
const record = {
from: from.fullPath,
to: to.fullPath,
time: new Date().getTime()
};
saveVisitRecord(record);
})上面的代码中，saveVisitRecord 是一个自定义的函数，用于将用户的访问记录保存到本地存储中。
beforeResolve
beforeResolve 钩子函数会在每个路由跳转之前被调用，它与 beforeEach 的区别在于 beforeResolve 在全局钩子函数中是最后一个被调用的钩子函数，它会在所有组件内的 beforeRouteEnter 钩子函数之前被调用。
router.beforeResolve((to, from, next) => {
// ...
next();
})在 beforeResolve 钩子函数中，我们可以进行一些需要在组件内的 beforeRouteEnter 钩子函数之前处理的逻辑，例如加载数据：
router.beforeResolve(async (to, from, next) => {
if (to.meta.loadData) {
const data = await to.meta.loadData();
to.matched[0].instances.default.loadData(data);
}
next();
})上面的代码中，to.meta.loadData 表示该路由需要加载数据，to.matched[0].instances.default 表示该路由对应的组件实例，loadData 是组件内自定义的一个方法，用于加载数据。在 beforeResolve 钩子函数中，我们通过调用 to.meta.loadData 加载数据，并在加载完成后调用组件实例的 loadData 方法，将数据传递给组件。
路由独享的钩子函数
路由独享的钩子函数是指只在某个路由中被调用的钩子函数，包括 beforeEnter 和 afterEnter。这些钩子函数可以用于在特定路由中进行逻辑处理。
beforeEnter
beforeEnter 钩子函数与 beforeEach 钩子函数的用法相似，它可以在某个路由中进行拦截和权限控制。
-- -------------------- ---- -------
-
----- -------------
---------- ----------
------------ ---- ----- ----- -- -
-- -------------------- -
------
----- ---------
------ - --------- ----------- -
---
- ---- -
-------
-
-
-上面的代码中，beforeEnter 钩子函数被定义在 /dashboard 路由中，用于检查用户是否已经登录，如果未登录则跳转到登录页面。
afterEnter
afterEnter 钩子函数与 afterEach 钩子函数的用法相似，它可以在某个路由中进行与路由跳转相关的操作。
-- -------------------- ---- -------
-
----- -------------
---------- ----------
----------- ---- ----- -- -
----- ------ - -
----- --------------
--- ------------
----- --- ----------------
--
------------------------
-
-上面的代码中，afterEnter 钩子函数被定义在 /dashboard 路由中，用于记录用户的访问记录。
组件内的钩子函数
组件内的钩子函数是指在某个组件内被调用的钩子函数，包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。这些钩子函数可以用于在组件内进行逻辑处理，例如加载数据、检查权限等。
beforeRouteEnter
beforeRouteEnter 钩子函数会在路由进入该组件前被调用，它接收三个参数：to、from 和 next。由于该钩子函数在路由进入组件前被调用，因此无法访问组件实例，需要使用 next 回调函数传递组件实例。
-- -------------------- ---- -------
-
----- -------------
---------- ----------
----------------- ---- ----- ----- -- -
------- -- -
--------------
---
-
-上面的代码中，beforeRouteEnter 钩子函数被定义在 /dashboard 路由对应的组件中，用于加载数据。由于该钩子函数无法访问组件实例，因此需要使用 next 回调函数传递组件实例，并在回调函数中调用组件实例的 loadData 方法。
beforeRouteUpdate
beforeRouteUpdate 钩子函数会在路由更新时被调用，它接收两个参数：to 和 from，分别表示即将要跳转的路由和当前的路由。
-- -------------------- ---- -------
-
----- -----------------
---------- ----------
------------------ ---- ----- ----- -- -
-- ------------- --- --------------- -
-------
- ---- -
------------
-
-
-上面的代码中，beforeRouteUpdate 钩子函数被定义在 /dashboard/:id 路由对应的组件中，用于检查路由参数是否发生变化。如果路由参数发生变化，则调用 next 函数，否则调用 next(false) 函数取消路由跳转。
beforeRouteLeave
beforeRouteLeave 钩子函数会在路由离开该组件前被调用，它接收两个参数：to 和 from，分别表示即将要跳转的路由和当前的路由，可以用于检查用户是否保存了修改的数据等。
-- -------------------- ---- -------
-
----- -----------------
---------- ----------
----------------- ---- ----- ----- -- -
-- ----------------- -
-- -------------------------------- -
-------
- ---- -
------------
-
- ---- -
-------
-
-
-上面的代码中，beforeRouteLeave 钩子函数被定义在 /dashboard/:id 路由对应的组件中，用于检查用户是否保存了修改的数据。如果数据已经修改，则弹出确认框询问用户是否保存，如果用户选择保存则调用 next 函数，否则调用 next(false) 函数取消路由跳转。
实战示例
下面是一个使用 Vue-Router 的示例代码，包括全局钩子函数、路由独享的钩子函数和组件内的钩子函数。该示例代码实现了一个简单的登录页面和一个需要登录才能访问的控制台页面。
-- -------------------- ---- -------
------ --- ---- ------
------ --------- ---- -------------
------ ----- ---- -------------------------
------ --------- ---- -----------------------------
-------------------
----- ------ - --- -----------
------- -
-
----- ---------
---------- -----
--
-
----- -------------
---------- ----------
----- - ------------- ---- --
------------ ---- ----- ----- -- -
-- -------------------- -
------
----- ---------
------ - --------- ----------- -
---
- ---- -
-------
-
--
--------- -
-
----- ----------
---------- --------
------------ ---- ----- ----- -- -
-- ----------------- -
-- -------------------------------- -
-------
- ---- -
------------
-
- ---- -
-------
-
-
-
-
-
-
---
---------------------- ----- ----- -- -
-- --------------------- -- ------------------- -
------
----- ---------
------ - --------- ----------- -
---
- ---- -
-------
-
---
--------------------- ----- -- -
----- ------ - -
----- --------------
--- ------------
----- --- ----------------
--
------------------------
---
------ ------- -------上面的代码中，/login 路由对应的组件是登录页面，/dashboard 路由对应的组件是控制台页面，需要登录才能访问。/dashboard 路由中定义了 beforeEnter 钩子函数和子路由 /dashboard/profile 中定义了 beforeEnter 和 beforeRouteLeave 钩子函数。
总结
Vue-Router 的路由钩子函数是一个十分重要的概念，它能够帮助我们实现路由拦截、权限控制、数据加载等功能。全局钩子函数、路由独享的钩子函数和组件内的钩子函数都有自己的用途，需要根据具体的场景选择使用。在实际开发中，我们需要根据业务需求合理使用路由钩子函数，以提高应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6571b091d2f5e1655da5f9bd