vue中的路由守卫有什么用

1、控制访问权限，2、管理导航行为，3、优化用户体验。Vue中的路由守卫（Navigation Guards）是用于监听和控制路由导航的工具。通过使用路由守卫，开发者可以在用户进入某个路由之前、进入之后，或者离开某个路由时执行特定的逻辑。这对于实现权限控制、数据预加载、页面跳转逻辑管理等功能尤为重要。

一、什么是路由守卫

路由守卫是Vue Router提供的一种功能，允许在路由进入、更新和离开时执行特定的代码。它们可以分为三类主要守卫：

全局守卫：在整个应用范围内起作用。
路由独享守卫：在特定路由内起作用。
组件内守卫：在组件内定义，用于单个组件的进入和离开。

二、路由守卫的类型及使用场景

全局守卫
- beforeEach：在每次路由改变前执行，用于权限验证和日志记录。
- beforeResolve：在导航被确认前，同时在所有组件内守卫和异步路由组件被解析之后被调用。
- afterEach：导航结束后执行，用于清理操作或结束加载指示器。

router.beforeEach((to, from, next) => {
  // 权限验证逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login' });
  } else {
    next();
  }
});

路由独享守卫
- beforeEnter：在进入某个路由前执行，可以用于特定路由的权限控制或数据预加载。

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

组件内守卫
- beforeRouteEnter：在进入组件的路由前执行，可以用于数据预加载。
- beforeRouteUpdate：在当前路由改变，但是仍然渲染同一个组件时调用。
- beforeRouteLeave：在离开组件的路由时调用，可以用于警告用户未保存的更改。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入组件前执行
    next(vm => {
      // 访问组件实例
      vm.loadData();
    });
  },
  beforeRouteLeave(to, from, next) {
    // 提醒用户未保存的更改
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('你有未保存的更改，确定要离开吗？');
      if (!answer) next(false);
      else next();
    } else {
      next();
    }
  }
};

三、路由守卫的实现逻辑与最佳实践

实现权限控制

通过在路由守卫中检查用户的登录状态或权限，可以确保只有授权用户才能访问特定页面。例如，结合JWT（JSON Web Token）实现：

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

数据预加载

在进入某些路由时预加载数据，可以提高用户体验，避免在组件加载后再发起数据请求：

export default {
  beforeRouteEnter(to, from, next) {
    fetchData().then(data => {
      next(vm => vm.setData(data));
    });
  }
};

处理未保存的更改

在离开某个路由时提醒用户保存未保存的更改，可以避免数据丢失：

beforeRouteLeave(to, from, next) {
  if (this.hasUnsavedChanges) {
    const answer = window.confirm('你有未保存的更改，确定要离开吗？');
    if (!answer) next(false);
    else next();
  } else {
    next();
  }
}

四、优化用户体验

加载指示器

在全局守卫中添加加载指示器，在路由导航开始时显示，结束时隐藏：

router.beforeEach((to, from, next) => {
  store.commit('setLoading', true);
  next();
});
router.afterEach(() => {
  store.commit('setLoading', false);
});

滚动行为

通过在路由守卫中控制页面滚动行为，可以确保用户在导航到新页面时，页面滚动到预期位置：

const router = new VueRouter({
  routes: [
    // 路由配置
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

五、常见问题与解决方案

路由守卫中的异步操作

确保在异步操作完成后调用next()，否则导航将被卡住：

router.beforeEach((to, from, next) => {
  fetchData().then(() => {
    next();
  }).catch(() => {
    next('/error');
  });
});

递归导航

避免在路由守卫中直接调用next(to)，这可能会导致无限递归：

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

性能优化

尽量减少在路由守卫中执行的复杂逻辑和频繁的异步请求，避免影响导航性能。

总结

Vue中的路由守卫是管理路由导航行为的重要工具，具有控制访问权限、优化用户体验等多种功能。通过合理使用全局守卫、路由独享守卫和组件内守卫，开发者可以实现复杂的导航逻辑，确保应用安全性和用户体验。为了更好地利用路由守卫，建议在实际项目中根据具体需求灵活配置，并结合其他Vue Router特性，如动态路由、路由懒加载等，进一步优化应用性能和用户体验。