Vue路由导航守卫全解析：Vue2/Vue3/多端(uni-app)差异与实战指南
本文系统讲解Vue生态中路由导航守卫的核心原理、全版本用法、跨端差异与实战场景，适合前端新手入门、老手查漏补缺，可直接用于项目开发，也可作为面试复习资料。
一、什么是路由导航守卫？核心作用与适用场景
路由导航守卫，本质是路由跳转过程中的一系列钩子函数，允许你在路由跳转的不同阶段拦截、修改、取消跳转行为，实现对路由的精细化控制。
核心作用
- 权限控制：最常用的登录拦截、页面权限校验
- 跳转拦截：未保存表单提示、非法跳转拦截
- 数据预加载：进入页面前提前请求接口数据
- 页面埋点：跳转统计、页面标题动态修改
- 重定向优化：根据用户状态自动调整跳转目标
核心分类（通用逻辑）
无论Vue2/Vue3，导航守卫按作用范围分为3大类，执行顺序固定：
二、Vue2（vue-router@3）导航守卫完整用法
Vue2配套的是vue-router@3.x版本，是目前很多存量项目的主流方案，核心特点是必须通过next()回调控制跳转行为。
2.1 全局守卫
全局守卫在路由实例上注册，所有路由跳转都会执行，写在router/index.js或main.js中。
1. 全局前置守卫 beforeEach
跳转前最早触发的守卫，权限控制的核心钩子，必须调用next()。
// router/index.js
import Vue from \’vue\’
import Router from \’vue-router\’
import Login from \’@/views/Login.vue\’
import Home from \’@/views/Home.vue\’
Vue.use(Router)
const router = new Router({
routes: [
{
path: \’/login\’, component: Login, meta: {
title: \’登录页\’ } },
{
path: \’/home\’, component: Home, meta: {
title: \’首页\’, requiresAuth: true } }
]
})
// 全局前置守卫：登录拦截核心实现
router.beforeEach((to, from, next) => {
// 参数说明：
// to：即将要进入的目标路由对象
// from：当前导航正要离开的路由对象
// next：必须调用的回调函数，控制跳转行为
const token = localStorage.getItem(\’token\’)
// 白名单：无需登录即可访问的页面
const whiteList = [\’/login\’, \’/register\’]
if (token) {
// 已登录：禁止重复访问登录页
to.path === \’/login\’ ? next(\’/home\’) : next()
} else {
// 未登录：白名单放行，否则跳登录页
whiteList.includes(to.path
