2024年4月5日发(作者：)

vue3 router 组件钩子函数

Vue 3 Router 组件钩子函数

在Vue 3中，Router组件钩子函数是一种非常有用的技术，可以在

路由的不同阶段执行自定义的逻辑。这些钩子函数可以帮助我们在

路由导航过程中进行一些额外的操作，例如验证用户权限、处理数

据加载、设置页面标题等。

在Vue 3的Router中，有三个主要的组件钩子函数：beforeEach、

beforeResolve和afterEach。

1. beforeEach钩子函数

beforeEach钩子函数会在每次路由跳转之前被调用。它可以用来进

行全局的路由守卫，例如验证用户是否登录或拥有访问权限。在这

个钩子函数中，我们可以通过调用next函数来决定是否继续路由导

航。

例如，我们可以通过在beforeEach钩子函数中检查用户是否已登录

来限制某些页面的访问：

```

Each((to, from, next) => {

if (esAuth && !isUserLoggedIn()) {

next('/login');

} else {

next();

}

});

```

在上面的例子中，如果要跳转的页面需要用户登录权限，并且用户

未登录，则会被重定向到登录页面。

2. beforeResolve钩子函数

beforeResolve钩子函数会在路由跳转之前被调用，与beforeEach

钩子函数不同的是，它会在导航被确认之前被调用。这意味着在这

个钩子函数中可以进行一些在路由跳转之前必须完成的异步操作。

例如，我们可以在beforeResolve钩子函数中加载一些数据，然后

再进行路由导航：

```

Resolve(async (to, from, next) => {

await loadData();

next();

});

```

在上面的例子中，我们通过调用一个异步函数loadData来加载一些

数据，在数据加载完成之后才继续路由导航。

3. afterEach钩子函数

afterEach钩子函数会在每次路由跳转之后被调用。它可以用来进

行一些后续操作，例如设置页面标题、统计页面浏览量等。

例如，我们可以在afterEach钩子函数中设置每个页面的标题：

```

ach((to, from) => {

= || 'My App';

});

```

在上面的例子中，我们通过设置来动态更改页面的

标题。如果目标路由对象(to)中定义了属性，则使用该

属性作为页面标题，否则使用默认标题。

总结：

Vue 3 Router组件钩子函数提供了一种灵活的方式来处理路由导航

过程中的额外逻辑。不同的钩子函数在路由导航的不同阶段被调用，

可以用来进行权限验证、数据加载、页面标题设置等操作。合理利

用这些钩子函数可以提升应用的用户体验和开发效率。