如何处理 Vue 3 应用程序中的路由守卫？

最新推荐文章于 2024-10-03 21:06:52 发布

jnfy

最新推荐文章于 2024-10-03 21:06:52 发布

阅读量511

点赞数 8

分类专栏： vue 文章标签： vue.js javascript 前端 vu3 前端框架

本文链接：https://blog.csdn.net/cui137610/article/details/141637666

版权

vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

在现代Web应用程序开发中，路由守卫是一个必不可少的功能。

特别是在使用Vue.js进行单页面应用开发时，更是如此。

在Vue 3中，路由守卫的使用有了更多的灵活性与功能。

本文将详细介绍如何在Vue 3应用中使用路由守卫，并通过示例代码帮助您更深入地理解和掌握这一重要技能。

一、什么是路由守卫？

路由守卫顾名思义，是对路由跳转进行控制和保护的一种手段。

通过在路由跳转前后进行拦截，可以在用户导航到特定页面前进行一些逻辑处理，比如用户认证、数据准备、权限校验等。

Vue Router 提供了三类守卫：

1. **全局守卫**：

对所有路由有效。

2. **路由独享守卫**：

只对单个路由有效。

3. **组件内守卫**：

对特定组件有效。

二、全局路由守卫

全局路由守卫包括全局前置守卫、全局解析守卫和全局后置守卫。

1. 全局前置守卫

全局前置守卫会在每次路由变化前触发。

可以用来判断用户是否有权限进入某个路由。

```javascriptimport { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({  history: createWebHistory(),  routes: [    // 路由配置  ]});
router.beforeEach((to, from, next) => {  // 判断用户是否已登录  const isAuthenticated = false; // 这里可以根据实际情况进行判断  if (to.meta.requiresAuth && !isAuthenticated) {    next('/login'); // 跳转到登录页  } else {    next(); // 放行  }});
export default router;```

2. 全局解析守卫

全局解析守卫在beforeEach和组件内守卫之间执行。

用于在导航被确认前做一些异步操作。

```javascriptrouter.beforeResolve((to, from, next) => {  // 这里可以执行一些异步操作，比如数据加载  // 异步操作完成后调用 next()  next();});```

3. 全局后置守卫

全局后置守卫不会改变导航本身，只能用于一些辅助操作，比如修改页面标题等。

```javascriptrouter.afterEach((to, from) => {  // 修改页面标题  document.title = to.meta.title || '默认标题';});```

三、路由独享守卫

路由独享守卫是定义在路由配置中的守卫，只对该路由有效。

```javascriptconst routes = [  {    path: '/dashboard',    component: () => import('../views/Dashboard.vue'),    beforeEnter: (to, from, next) => {      // 只有在用户登录时才允许访问      const isAuthenticated = false; // 这里根据实际情况判断      if (isAuthenticated) {        next();      } else {        next('/login');      }    }  }];
const router = createRouter({  history: createWebHistory(),  routes});
export default router;```

四、组件内守卫

组件内守卫是在组件内部定义的守卫，可以更细粒度地控制组件的导航行为。

包括 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave`。

1. beforeRouteEnter

在导航进入该组件的路由之前调用。

在此守卫中不能访问 `this`，因为组件实例还未被创建，通常用于判断是否允许进入该路由。

```javascriptexport default {  name: 'Dashboard',  beforeRouteEnter(to, from, next) {    // 判断用户是否已登录    const isAuthenticated = false; // 这里根据实际情况判断    if (isAuthenticated) {      next();    } else {      next('/login');    }  }};```

2. beforeRouteUpdate

当路由变化但依旧停留在当前组件时调用。

比如从 `/user/1` 到 `/user/2` 这种情况会触发 `beforeRouteUpdate`。

```javascriptexport default {  name: 'UserProfile',  beforeRouteUpdate(to, from, next) {    // 这里可以执行一些更新操作    this.userId = to.params.id; // 假设userId是组件的一个属性    next();  }};```

3. beforeRouteLeave

在导航离开该组件的路由时调用。

常用于提示用户是否保存未提交的信息。

```javascriptexport default {  name: 'FormComponent',  beforeRouteLeave(to, from, next) {    if (this.hasUnsavedChanges) { // 假设hasUnsavedChanges用来标识是否有未保存的更改      if (confirm('你有未保存的更改，确定离开吗？')) {        next();      } else {        next(false);      }    } else {      next();    }  }};```

五、示例代码整合

下面我们将一些常见的路由守卫需求整合到一个完整的示例应用中。

```javascriptimport { createRouter, createWebHistory } from 'vue-router';import Home from '../views/Home.vue';import Dashboard from '../views/Dashboard.vue';import Login from '../views/Login.vue';import UserProfile from '../views/UserProfile.vue';import FormComponent from '../views/FormComponent.vue';
// 路由配置const routes = [  {    path: '/',    component: Home  },  {    path: '/dashboard',    component: Dashboard,    meta: { requiresAuth: true },    beforeEnter: (to, from, next) => {      const isAuthenticated = false; // 根据实际情况判断      if (isAuthenticated) {        next();      } else {        next('/login');      }    }  },  {    path: '/login',    component: Login  },  {    path: '/user/:id',    component: UserProfile  },  {    path: '/form',    component: FormComponent  }];
// 创建路由实例const router = createRouter({  history: createWebHistory(),  routes});
// 全局前置守卫router.beforeEach((to, from, next) => {  const isAuthenticated = false; // 根据实际情况判断  if (to.meta.requiresAuth && !isAuthenticated) {    next('/login');  } else {    next();  }});
// 全局后置守卫router.afterEach((to, from) => {  document.title = to.meta.title || '默认标题';});
export default router;```