【Vue3进阶】- Router 4-路由守卫

路由守卫主要用来通过跳转或取消的方式守卫导航。

每个路由守卫接收两个参数

• to：代表即将要进入的路由
• from：代表当前即将离开的路由

可选的第三个参数next
当设置该参数时，需要确保在路由守卫中执行一次next()若未调用，则页面导航将被阻塞，无法正常跳转。它可以出现多次，但应只执行一次。
next方法中可以传递path来重定向到其它页面

router.beforeEach((to, from, next) => {
  if (/* 用户未登录 */) {
    next('/login'); // 通过 next 方法重定向到登录页
  } else {
    next(); // 继续正常跳转
  }
});

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义路由
    { 
      path: '/home', 
      component: Home,
      // 路由独享的守卫
      beforeEnter: (to, from, next) => { 
        // 在进入路由前执行的逻辑
        // 可以进行权限验证等操作
        next(); // 调用next()继续路由导航
      }
    },
    // 其他路由定义
  ]
});

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  // 在进入每个路由前执行的逻辑
  // 可以进行全局的权限验证等操作
  next(); // 调用next()继续路由导航
});

export default router;