vue路由守卫是什么

发布时间:2025-03-29 02:50:36 发布人:远客网络

vue路由守卫是什么

Vue 路由守卫是 Vue Router 提供的一种功能，用于在导航发生前、导航完成后或导航被取消时执行特定的操作。它主要用于权限控制、数据预加载、状态检查等场景。1、全局守卫、2、路由独享守卫和3、组件内守卫是 Vue 路由守卫的三种主要类型。

一、全局守卫

全局守卫是在整个应用的路由导航过程中执行的守卫，分为全局前置守卫和全局后置守卫。

全局前置守卫（beforeEach）：
- 语法：router.beforeEach((to, from, next) => {})
- 用途：在每次导航前执行，用于检查用户是否有权限访问目标路由。
- 示例：
```
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});
```
全局后置守卫（afterEach）：
- 语法：router.afterEach((to, from) => {})
- 用途：在每次导航后执行，用于进行一些清理操作或页面统计等。
- 示例：
```
router.afterEach((to, from) => {
  console.log('Navigation completed to:', to.path);
});
```

二、路由独享守卫

路由独享守卫是为特定路由定义的守卫，分为beforeEnter。

路由独享的 beforeEnter 守卫：

语法：在路由配置中定义beforeEnter
用途：在进入某个特定路由前执行，用于特定路由的权限检查或数据预加载。

示例：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (isAuthenticated()) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

三、组件内守卫

组件内守卫是定义在 Vue 组件内部的守卫，分为beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。

beforeRouteEnter：

语法：在组件内定义beforeRouteEnter
用途：在进入组件对应的路由前执行，适用于组件初始化时需要的数据加载。

示例：

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 通过 vm 访问组件实例
      vm.loadData();
    });
  },
  methods: {
    loadData() {
      // 数据加载逻辑
    }
  }
};

beforeRouteUpdate：

语法：在组件内定义beforeRouteUpdate
用途：在当前路由改变但该组件被复用时执行，适用于更新组件数据。

示例：

export default {
  beforeRouteUpdate(to, from, next) {
    this.loadData();
    next();
  },
  methods: {
    loadData() {
      // 数据加载逻辑
    }
  }
};

beforeRouteLeave：

语法：在组件内定义beforeRouteLeave
用途：在离开组件对应的路由前执行，适用于确认用户是否保存更改等操作。

示例：

export default {
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('You have unsaved changes. Do you really want to leave?');
      if (answer) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  data() {
    return {
      hasUnsavedChanges: false
    };
  }
};

四、具体应用场景与实例

权限控制：

通过路由守卫检查用户是否有权限访问某些页面。

示例：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

数据预加载：

在进入某个路由前加载所需的数据，以便在组件渲染时可以直接使用。

示例：

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeEnter: (to, from, next) => {
      store.dispatch('fetchUserData', to.params.id).then(() => {
        next();
      });
    }
  }
];

防止未保存的更改丢失：

在用户尝试离开当前页面时，提示用户是否确认离开，以防止未保存的更改丢失。

示例：

export default {
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('You have unsaved changes. Do you really want to leave?');
      if (answer) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  data() {
    return {
      hasUnsavedChanges: false
    };
  }
};