vue beforeeach

// 在 Vue Router 中使用 beforeEach 全局前置守卫的示例代码

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

Vue.use(VueRouter);

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

// 使用 beforeEach 注册一个全局前置守卫
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(); // 目标路由不需要认证，直接允许继续导航
  }
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

解释说明：

• beforeEach 是 Vue Router 提供的一个全局前置守卫，它会在每次路由切换之前被调用。
• to 参数表示即将进入的目标路由对象，包含目标路径、名称等信息。
• from 参数表示当前导航正要离开的路由对象。
• next 是一个必须调用的函数，用于控制导航行为。可以通过 next() 继续导航，next(false) 取消导航，或者通过 next({ path: '...' }) 重定向到其他路径。
• 在这个示例中，我们检查目标路由是否需要认证（通过 meta.requiresAuth），并根据用户的登录状态决定是否允许导航或重定向到登录页面。