vue中 router.beforeEach()用法及使用场景详解

2023-12-15 19:37:10

在构建Vue应用时，合理利用路由是提升用户体验的关键。router.beforeEach()是一个强大的工具，它允许开发者在每个路由切换前执行特定的操作。本文将深入探讨如何使用router.beforeEach()进行导航守卫、权限控制和数据预加载等场景。

导航守卫

Vue Router 提供了几个全局钩子方法来处理导航过程中的状态管理，其中beforeEach是常用的全局前置守卫之一。当路由即将发生切换前会触发这个函数。

代码示例

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    // 路由配置
  ]
});

router.beforeEach((to, from, next) => {
  console.log('即将从', from.path, '前往', to.path);
  next();
});

在上面的示例中，每当路由发生变化时都会打印一条日志信息。这里next()是必须调用的，否则页面将无法进行导航。

权限控制

权限管理是很多应用的核心功能之一，可以通过beforeEach来实现用户权限检查。比如只有认证过的用户才能访问某些页面，未认证的用户则会被重定向到登录页面。

代码示例

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  
  if (requiresAuth && !isAuthenticated()) { // 假设有一个检查用户认证状态的方法
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 将要访问的路径作为查询参数，登录后可以自动跳转回来。
    });
  } else {
    next();
  }
});

在这个例子中，requiresAuth表示某个路由是否需要认证。如果用户未通过认证且试图访问受保护的资源，则会被重定向到登录页面。

数据预加载

在进入新页面前，可能需要从服务器获取数据，或者做一些准备性的工作。此时可以利用beforeEach来完成这些操作。

代码示例

router.beforeEach(async (to, from, next) => {
  if (to.meta.loadData) {
    const data = await fetchData(to.params.id); // 假设一个异步函数用于获取数据。
    store.commit('setPageData', data); // 将获取的数据存入Vuex store中，供组件使用。
  }
  
  next();
});

这里meta.loadData属性用来标识是否需要加载特定的数据。如果需要，则在导航到新页面之前异步请求数据，并将其存储在 Vuex Store 中。