vue3 router.beforeeach

// 使用 Vue Router 4.x 的 beforeEach 全局前置守卫

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // to 包含目标路由的信息
  // from 包含来源路由的信息
  // next 是一个函数，用于控制导航是否继续进行

  // 检查用户是否已登录（假设有一个 isAuthenticated 函数）
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 如果目标路由需要认证且用户未登录，则重定向到登录页面
    next({ path: '/login' });
  } else {
    // 否则继续导航
    next();
  }
});

function isAuthenticated() {
  // 假设这是一个检查用户是否已登录的函数
  return false; // 示例中返回 false 表示未登录
}

export default router;

解释说明：

• router.beforeEach 是 Vue Router 提供的一个全局前置守卫，它会在每次路由跳转之前执行。
• 参数 (to, from, next) 分别表示目标路由、来源路由和一个控制导航的函数。
• next() 用于控制导航行为：
  • 调用 next() 继续导航。
  • 调用 next(false) 取消当前导航。
  • 调用 next({ path: '/login' }) 重定向到指定路径。
• 在这个例子中，我们检查目标路由是否需要认证 (to.meta.requiresAuth)，如果需要但用户未登录，则重定向到登录页面。