vue router.beforeeach

// 使用 vue-router 的 beforeEach 钩子来在导航之前进行全局守卫

const router = new VueRouter({
  routes: [
    // 定义你的路由配置
  ]
});

router.beforeEach((to, from, next) => {
  // to: 即将要进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 必须调用该方法来 resolve 这个钩子，可以传递参数控制导航行为

  // 示例：检查用户是否已登录
  const isAuthenticated = /* 检查用户是否已登录 */;

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果目标路由需要认证且用户未登录，则重定向到登录页面
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将当前路径作为查询参数，以便登录后重定向回原路径
      });
    } else {
      next(); // 用户已登录，允许继续导航
    }
  } else {
    next(); // 目标路由不需要认证，直接允许继续导航
  }
});

解释说明：

• beforeEach 是一个全局前置守卫，在每次路由跳转之前都会被调用。
• to 参数表示即将进入的目标路由对象，包含目标路径、参数等信息。
• from 参数表示当前导航正要离开的路由对象。
• next 函数用于控制导航行为，必须调用它来 resolve 这个钩子。可以通过传递不同的参数来决定是继续导航、中断导航还是重定向到其他页面。
• 在示例中，我们检查了目标路由是否需要认证（通过 meta.requiresAuth），如果需要认证但用户未登录，则重定向到登录页面，并将当前路径作为查询参数保存，以便登录后可以重定向回原路径。