一、引言

二、技术背景

1. 导航守卫的核心概念

• ​​跳转阶段拦截​​：支持在路由跳转的​​前置阶段​​（如 beforeEach）、​​解析阶段​​（如 beforeResolve）和​​后置阶段​​（如 afterEach）插入逻辑。
• ​​多层级作用域​​：提供 ​​全局守卫​​（作用于所有路由）、​​路由独享守卫​​（作用于单个路由）和 ​​组件内守卫​​（作用于特定组件关联的路由）三种作用域，满足不同粒度的控制需求。
• ​​异步控制能力​​：守卫逻辑可以是异步的（如通过 Promise或 async/await等待数据加载完成），确保跳转前必要的操作（如权限校验、数据预取）执行完毕。

2. Vue Router 的导航流程

1. ​​导航触发​​：用户点击 <router-link>或调用 router.push()/router.replace()触发路由跳转。
2. ​​前置守卫执行​​：全局前置守卫（beforeEach）、路由独享守卫（beforeEnter）和组件内前置守卫（beforeRouteEnter）按顺序执行，可阻止跳转（通过 next(false)）或重定向（通过 next('/new-path')）。
3. ​​路由解析​​：解析目标路由及其嵌套路由，加载对应的组件（如果是懒加载）。
4. ​​解析守卫执行​​：全局解析守卫（beforeResolve）执行，确保所有异步操作（如数据加载）完成。
5. ​​后置钩子执行​​：全局后置守卫（afterEach）执行，通常用于记录日志或更新页面标题（无权阻止跳转）。
6. ​​组件渲染​​：目标组件及其嵌套组件被渲染到页面中。

3. 应用场景需求

• ​​权限控制​​：未登录用户禁止访问后台管理页面（如 /admin），跳转到登录页；已登录用户访问登录页时重定向到首页。
• ​​数据预加载​​：进入商品详情页前，先根据路由参数（如商品ID）从后端获取商品信息，确保页面渲染时数据已就绪。
• ​​页面状态管理​​：离开编辑页时，若用户未保存草稿，弹出提示框询问是否保存；刷新页面时恢复之前的滚动位置。
• ​​路由元信息利用​​：通过路由配置的 meta字段（如 { requiresAuth: true }）标记需要特殊处理的路由，守卫中根据 meta字段执行对应逻辑。

三、应用使用场景

1. 权限控制（登录验证）

2. 数据预加载（详情页优化）

3. 页面状态保存（编辑页提示）

4. 路由元信息控制（动态标题/面包屑）

四、不同场景下详细代码实现

场景1：全局前置守卫（权限控制）

1.1 路由配置（router/index.js）

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 标记需要登录
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

1.2 全局前置守卫实现（router/index.js 续）

// 在创建router实例后添加全局前置守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token'); // 获取本地存储的登录token
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth); // 检查目标路由是否需要登录

  if (requiresAuth && !token) {
    // 需要登录但未登录：跳转到登录页
    next('/login');
  } else if (to.path === '/login' && token) {
    // 已登录但访问登录页：重定向到首页
    next('/');
  } else {
    // 其他情况：正常放行
    next();
  }
});

1.3 原理解释

• ​​to和 from​​：to是即将跳转的目标路由对象（包含路径、参数、meta字段等），from是当前离开的路由对象。
• ​​meta.requiresAuth​​：通过路由配置的 meta字段标记哪些路由需要登录（如 /dashboard）。
• ​​next()函数​​：控制跳转流程：
  • next()：正常放行，继续后续守卫和路由渲染。
  • next('/login')：中断当前跳转，重定向到登录页。
  • next(false)：取消跳转，停留在当前页面（较少使用）。

场景2：路由独享守卫（数据预加载）

2.1 路由配置（router/index.js 续）

// 添加商品详情路由（带独享守卫）
{
  path: '/product/:id',
  name: 'ProductDetail',
  component: () => import('../views/ProductDetail.vue'),
  beforeEnter: (to, from, next) => {
    const productId = to.params.id; // 获取路由参数id
    // 模拟API请求（实际项目中替换为真实API调用）
    fetchProductDetail(productId).then(product => {
      // 将商品数据通过props传递给组件
      to.meta.product = product; // 存储到路由的meta中（组件通过props接收）
      next();
    }).catch(error => {
      console.error('获取商品详情失败:', error);
      next('/404'); // 失败时跳转到404页
    });
  }
}

// 模拟API函数（实际项目中替换为axios等库）
function fetchProductDetail(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: id, name: `商品${id}`, price: 99.9 });
    }, 500); // 模拟网络延迟
  });
}

2.2 商品详情组件（ProductDetail.vue）

<!-- src/views/ProductDetail.vue -->
<template>
  <div class="product-detail">
    <h1>{{ product.name }}</h1>
    <p>价格: ¥{{ product.price }}</p>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  props: ['product'], // 接收路由独享守卫传递的数据
  created() {
    // 若未通过props接收（如直接通过meta存储），可从this.$route.meta.product获取
    if (!this.product) {
      this.product = this.$route.meta.product;
    }
  }
};
</script>

<style scoped>
.product-detail {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
</style>

2.3 原理解释

• ​​beforeEnter​​：路由独享守卫，仅对当前路由（/product/:id）生效，在全局守卫之后、组件渲染之前执行。
• ​​参数传递​​：通过 to.meta.product临时存储商品数据（或直接通过 next({ ...to, props: { product } })传递，但需配合组件 props接收）。
• ​​异步处理​​：使用 Promise模拟API请求，确保数据加载完成后再放行（next()），避免组件渲染时数据未就绪。

场景3：组件内守卫（编辑页提示保存）

3.1 编辑组件（EditArticle.vue）

<!-- src/views/EditArticle.vue -->
<template>
  <div class="edit-article">
    <h1>编辑文章 (ID: {{ articleId }})</h1>
    <textarea v-model="content" placeholder="输入文章内容"></textarea>
    <p v-if="isModified && !isSaved" class="warning">（未保存的修改）</p>
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  name: 'EditArticle',
  props: ['id'],
  data() {
    return {
      content: '',
      isSaved: false,
      originalContent: '' // 记录原始内容（用于判断是否修改）
    };
  },
  computed: {
    articleId() {
      return this.$route.params.id;
    },
    isModified() {
      return this.content !== this.originalContent;
    }
  },
  created() {
    // 模拟加载文章内容（实际项目中从API获取）
    this.content = `这是文章${this.articleId}的初始内容`;
    this.originalContent = this.content;
  },
  // 组件内守卫：离开路由前触发
  beforeRouteLeave(to, from, next) {
    if (this.isModified && !this.isSaved) {
      // 有未保存的修改：弹出提示
      const shouldLeave = confirm('您有未保存的修改，确定要离开吗？');
      if (shouldLeave) {
        next(); // 用户确认，允许跳转
      } else {
        next(false); // 用户取消，阻止跳转
      }
    } else {
      next(); // 无未保存修改或已保存，正常放行
    }
  },
  methods: {
    save() {
      // 模拟保存操作（实际项目中调用API）
      this.originalContent = this.content;
      this.isSaved = true;
      alert('保存成功！');
    }
  }
};
</script>

<style scoped>
.edit-article {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
textarea {
  width: 100%;
  height: 200px;
  margin: 10px 0;
}
.warning {
  color: red;
  font-size: 14px;
}
button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

3.2 原理解释

• ​​beforeRouteLeave​​：组件内守卫，仅在当前组件（EditArticle.vue）即将离开时触发（如跳转到其他路由或关闭标签页）。
• ​​用户交互​​：通过 confirm弹窗询问用户是否确认离开，根据用户选择调用 next()（放行）或 next(false)（阻止）。
• ​​状态判断​​：通过 isModified和 isSaved计算属性判断是否有未保存的修改，避免无意义的提示。

五、原理解释

1. 导航守卫的执行顺序

1. ​​全局前置守卫（beforeEach）​​：最先执行，用于全局权限校验或通用逻辑（如设置页面标题）。
2. ​​路由独享守卫（beforeEnter）​​：仅对当前路由生效，适合处理特定路由的逻辑（如数据预加载）。
3. ​​组件内前置守卫（beforeRouteEnter）​​：在目标组件实例创建之前执行，无法访问组件实例（this），但可通过回调函数传递数据。
4. ​​组件内守卫（beforeRouteUpdate/beforeRouteLeave）​​：在路由参数变化（如 /product/1→ /product/2）或离开组件时触发。
5. ​​全局解析守卫（beforeResolve）​​：在所有组件和路由守卫解析完成后执行，确保异步操作完成。
6. ​​全局后置守卫（afterEach）​​：最后执行，通常用于记录日志或更新页面状态（无权阻止跳转）。

2. 核心守卫类型详解

• ​​全局前置守卫（beforeEach）​​：
  • ​​作用域​​：所有路由跳转均会触发。
  • ​​典型用途​​：权限控制（检查登录状态）、全局数据初始化（如设置用户信息）。
  • ​​代码示例​​：

    router.beforeEach((to, from, next) => {
      if (to.meta.requiresAuth && !isLoggedIn()) next('/login');
      else next();
    });

• ​​路由独享守卫（beforeEnter）​​：
  • ​​作用域​​：仅对配置了该守卫的单个路由生效。
  • ​​典型用途​​：数据预加载（根据路由参数获取数据）、特定路由的权限校验。
  • ​​代码示例​​：

    {
      path: '/product/:id',
      component: ProductDetail,
      beforeEnter: (to, from, next) => {
        fetchProduct(to.params.id).then(data => next());
      }
    }

• ​​组件内守卫（beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave）​​：
  • ​​作用域​​：仅对关联该组件的路由生效。
  • ​​典型用途​​：组件级别的状态管理（如编辑页提示保存）、路由参数变化时的数据更新。
  • ​​代码示例​​：

    export default {
      beforeRouteLeave(to, from, next) {
        if (this.hasUnsavedChanges) next(confirm('保存？'));
        else next();
      }
    }

3. 关键API说明

• ​​to和 from​​：路由对象，包含路径（path）、参数（params）、查询（query）、元信息（meta）等属性。
• ​​next()​​：控制跳转流程的核心函数，参数可以是：
  • 无参数（next()）：正常放行。
  • 路径字符串（next('/login')）：重定向到指定路径。
  • false（next(false)）：取消跳转，停留在当前页面。
  • 路由对象（next({ path: '/new', query: { id: 1 } })）：跳转到自定义路由对象。

六、核心特性

七、原理流程图及原理解释

原理流程图（导航守卫执行流程）

+-----------------------+       +-----------------------+       +-----------------------+
|  用户触发路由跳转     |       |  全局前置守卫         |       |  路由独享守卫         |
|  （如点击链接/调用API）| ----> |  (beforeEach)         | ----> |  (beforeEnter)        |
+-----------------------+       +-----------------------+       +-----------------------+
          |                             |                             |
          |  检查全局逻辑（如权限）|  可阻止/重定向            |  检查当前路由逻辑       |
          |----------------------->|                             |  （如数据预加载）      |
          |                             |  调用next()继续流程       |----------------------->|
          |                             |                             |  调用next()继续流程    |
          |  全局解析守卫       |       |  组件内守卫           |
          |  (beforeResolve)    |       |  (beforeRouteEnter/Leave)|
          |----------------------->|                             |  （如编辑页提示保存）  |
          |  确保异步操作完成     |       |  可阻止跳转             |----------------------->|
          |----------------------->|                             |  调用next()继续流程    |
          |  全局后置守卫       |       |  目标组件渲染         |
          |  (afterEach)        |       |  （页面显示）          |
          |----------------------->|                             |
          |  记录日志/更新状态   |       |                       |
          |  （无权阻止跳转）    |       |                       |
+-----------------------+       +-----------------------+       +-----------------------+

原理解释

1. ​​导航触发​​：用户通过 <router-link>或编程式导航（如 router.push()）发起路由跳转请求。
2. ​​全局前置守卫​​：首先执行 beforeEach，检查全局逻辑（如用户是否登录、是否需要权限），若不满足条件则通过 next('/login')重定向或 next(false)取消跳转。
3. ​​路由独享守卫​​：若全局守卫放行，执行当前路由配置的 beforeEnter，处理特定路由的逻辑（如根据参数预加载数据），同样可通过 next()控制流程。
4. ​​组件内守卫​​：进入目标组件关联的守卫（如 beforeRouteEnter或 beforeRouteLeave），组件内守卫可访问路由参数和组件状态（如编辑页的未保存修改），通过 next()决定是否允许跳转。
5. ​​全局解析守卫​​：在所有组件和路由守卫解析完成后执行 beforeResolve，确保所有异步操作（如数据加载）完成，避免页面渲染时数据缺失。
6. ​​全局后置守卫​​：最后执行 afterEach，通常用于记录路由跳转日志、更新页面标题或统计信息（无权阻止跳转）。
7. ​​组件渲染​​：所有守卫通过后，目标组件及其嵌套组件被渲染到页面中，完成整个导航流程。

八、环境准备

1. 开发环境

• ​​操作系统​​：Windows 10/11、macOS 或 Linux。
• ​​开发工具​​：Visual Studio Code（推荐）、Node.js（版本 ≥ 16）。
• ​​Vue CLI 或 Vite​​：通过 npm create vue@latest（基于Vite）创建Vue 3项目，Vue Router 4（Vue 3默认集成）。
• ​​依赖​​：无需额外安装Vue Router（Vue 3项目创建时可选集成，若未集成可手动安装：npm install vue-router@4）。

2. 项目初始化

# 使用Vite创建Vue 3项目（推荐）
npm create vue@latest vue-navigation-guard-demo
cd vue-navigation-guard-demo
npm install

# 若需手动安装Vue Router（通常无需）
npm install vue-router@4

3. 目录结构

vue-navigation-guard-demo/
├── src/
│   ├── components/     # 公共组件（可选）
│   ├── views/          # 页面组件（如Home.vue、Login.vue、Dashboard.vue）
│   ├── router/         # 路由配置（index.js）
│   ├── App.vue         # 根组件
│   └── main.js         # 应用入口
├── package.json
└── index.html

九、实际详细应用代码示例实现

完整代码结构（基于场景1~3）

• ​​路由配置​​（src/router/index.js）：定义全局守卫、路由独享守卫（商品详情页数据预加载）和组件内守卫（编辑页提示保存）。
• ​​页面组件​​（Home.vue、Login.vue、Dashboard.vue、ProductDetail.vue、EditArticle.vue）：实现具体业务逻辑。
• ​​根组件​​（App.vue）：渲染当前路由匹配的组件（包括受守卫控制的页面）。

1. 创建项目并安装依赖（如上述命令）。
2. 按照代码示例创建 router/index.js、各页面组件（Home.vue、Login.vue等）和 App.vue。
3. 启动开发服务器（npm run dev），测试不同场景的导航守卫效果（如未登录访问 /dashboard、离开编辑页未保存等）。

十、运行结果

正常情况（权限控制）

• 未登录用户访问 /dashboard，自动跳转到 /login。
• 已登录用户访问 /login，自动重定向到 /。

数据预加载（商品详情页）

• 访问 /product/123时，页面渲染前通过守卫预加载商品数据（如名称、价格），组件直接显示加载后的内容。

编辑页提示（组件内守卫）

• 在 /edit/1页面修改内容但未保存，点击浏览器后退按钮或跳转到其他路由时，弹出提示框询问是否保存，用户确认后才允许跳转。

十一、测试步骤及详细代码

测试场景1：全局权限守卫

1. ​​步骤​​：
   • 清除浏览器本地存储的 token（模拟未登录），访问 /dashboard。
   • 检查是否自动跳转到 /login。
   • 登录后（设置 localStorage.setItem('token', 'mock-token')），访问 /login，检查是否重定向到 /。
2. ​​预期结果​​：
   • 未登录用户无法访问 /dashboard，已登录用户无法访问 /login。

测试场景2：路由独享数据预加载

1. ​​步骤​​：
   • 访问 /product/456，检查页面是否直接显示商品名称（如“商品456”）和价格（如“¥99.9”），无需额外等待。
2. ​​预期结果​​：
   • 商品数据通过守卫预加载，组件渲染时数据已就绪。

测试场景3：组件内编辑提示

1. ​​步骤​​：
   • 访问 /edit/1，修改文本框内容但未点击“保存”按钮，尝试点击浏览器后退按钮或跳转到 /。
   • 检查是否弹出提示框“您有未保存的修改，确定要离开吗？”，点击“取消”后是否停留在当前页面。
2. ​​预期结果​​：
   • 未保存的修改会触发提示，用户确认后才允许跳转。

十二、部署场景

1. 静态部署（如Nginx）

• ​​构建生产版本​​：运行 npm run build，生成 dist文件夹（包含优化后的静态文件）。
• ​​配置服务器​​：将 dist文件夹部署到Web服务器（如Nginx、Apache）。
• ​​路由模式适配​​：
  • 若使用 history模式（默认），需配置服务器将所有非静态文件请求重定向到 index.html（确保刷新页面不404）。
  • Nginx示例配置：

    location / {
      try_files $uri $uri/ /index.html;
    }

2. 云平台部署（如Vercel、Netlify）

• 直接上传 dist文件夹或通过Git集成自动构建，云平台会自动处理路由和静态资源。

十三、疑难解答

问题1：守卫未生效（如权限控制未拦截）

问题2：组件内守卫无法访问组件实例（this为 undefined）

问题3：异步数据加载导致页面空白

十四、未来展望

1. 技术趋势

• ​​组合式API与导航守卫​​：Vue 3的Composition API（如 useRoute、useRouter）将更深度集成导航守卫逻辑，提供更灵活的路由状态管理和异步控制方式。
• ​​动态路由守卫生成​​：结合后端权限系统动态生成路由守卫规则（如根据用户角色加载不同的权限校验逻辑），提升应用的灵活性和安全性。
• ​​服务端渲染（SSR）适配​​：导航守卫在SSR场景下的数据预取（如服务端提前加载用户信息）和路由同步将更完善，确保首屏渲染速度和安全性。

2. 挑战

• ​​复杂守卫逻辑的维护​​：多层级守卫（全局+路由独享+组件内）的嵌套可能导致逻辑复杂度过高，需设计清晰的职责划分（如全局守卫处理通用逻辑，组件内守卫处理具体状态）。
• ​​性能优化​​：异步守卫（如数据预加载）可能增加路由跳转的延迟，需合理控制异步操作的粒度和缓存策略（如避免重复请求相同数据）。

十五、总结