知识篇：（二十）Vue Router 完全指南：动态路由、嵌套路由与懒加载

知识篇：（二十）Vue Router 完全指南：动态路由、嵌套路由与懒加载

Vue Router 是 Vue.js 官方提供的路由解决方案，专为单页面应用 (SPA) 设计，帮助我们在不同的视图之间轻松切换。尤其在复杂应用中，掌握 Vue Router 的动态路由、嵌套路由与懒加载，能显著提升项目的结构和性能。

本文将深入探讨 Vue Router 的高级用法，包括动态路由、嵌套路由和懒加载的实现与优化。

---

目录

1. Vue Router 基础：路由配置与导航守卫
2. 动态路由：使用动态参数
3. 嵌套路由：实现组件的嵌套与复用
4. 懒加载：提升应用性能
5. 路由元信息：访问控制与状态设置
6. 总结

---

1. Vue Router 基础：路由配置与导航守卫

路由的基本配置

在 Vue 项目中使用 Vue Router，首先需要在项目中安装 vue-router，然后定义路由配置：

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

const routes = [
  {
    path: '/', name: 'Home', component: Home },
  {
    path: '/about', name: 'About', component: About },
];

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

export default router;

导航守卫

Vue Router 提供了导航守卫，允许在路由切换时执行检查或其他操作：

• 全局守卫：在路由实例上直接调用 router.beforeEach 添加全局前置守卫。
• 路由独享守卫：在路由配置中直接添加 beforeEnter。
• 组件内守卫：在组件内使用 beforeRouteEnter、beforeRouteUpdate 和 befo