vue 路由（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

理解 Vue 路由的核心概念

在现代 Web 开发中，单页应用（SPA）因其流畅的用户体验而备受青睐。Vue 路由（Vue Router）正是为这类应用设计的导航系统，它允许开发者通过 URL 的变化来管理不同视图的切换，而无需重新加载整个页面。对于编程初学者来说，理解 Vue 路由就像掌握一套“导航地图”，能帮助你清晰地规划应用的页面结构与跳转逻辑。

Vue 路由的核心概念包括：

• 路由（Route）：定义 URL 路径与对应组件的映射关系，例如 /about 对应 About.vue 组件。
• 路由表（Router Table）：存储所有路由配置的集合，通常以数组形式存在。
• 路由实例（Router Instance）：通过 createRouter 创建的对象，负责处理路由的解析、跳转和导航守卫。
• 导航（Navigation）：用户触发的页面跳转动作，可能涉及路径参数传递、动态匹配等。

安装与基础配置

要使用 Vue 路由，首先需要通过 npm 或 yarn 安装：

npm install vue-router@next

安装完成后，在项目中创建路由实例并挂载到 Vue 应用。以下是一个最小化配置示例：

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

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

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

export default router;  

在主文件中引入并挂载路由实例：

// main.js  
import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router';  

const app = createApp(App);  
app.use(router);  
app.mount('#app');  

此时，访问 / 和 /about 路径时，会自动渲染对应的组件。

配置路由表：构建应用导航结构

路由表是 Vue 路由的核心配置文件，它决定了用户访问不同路径时展示的组件。以下通过表格总结路由配置项的常用参数：

动态路由与参数传递

动态路由允许通过路径参数捕获用户输入，例如 /user/123 中的 123 可作为 id 参数传递。以下是一个用户详情页的配置示例：

const routes = [  
  {  
    path: '/user/:id',  
    component: UserDetail,  
    name: 'user-detail',  
  },  
];  

在组件中，可以通过 route.params 获取参数：

// UserDetail.vue  
import { useRoute } from 'vue-router';  

export default {  
  setup() {  
    const route = useRoute();  
    const userId = route.params.id; // 获取路径中的 id 值  
    return { userId };  
  },  
};  

嵌套路由：构建多级页面结构

嵌套路由适合管理父子页面关系。例如，一个仪表盘页面包含“概览”和“设置”两个子页面：

const routes = [  
  {  
    path: '/dashboard',  
    component: Dashboard,  
    children: [  
      { path: '', component: DashboardOverview, name: 'dashboard-overview' },  
      { path: 'settings', component: DashboardSettings, name: 'dashboard-settings' },  
    ],  
  },  
];  

在父组件 Dashboard.vue 中，通过 <router-view> 渲染子组件：

<!-- Dashboard.vue -->  
<template>  
  <h1>仪表盘</h1>  
  <router-view></router-view>  
</template>  

访问 /dashboard 时会显示 DashboardOverview，而 /dashboard/settings 则渲染 DashboardSettings。

导航守卫：控制页面跳转逻辑

导航守卫是 Vue 路由的核心功能之一，允许在路由切换前、切换后或错误时执行自定义逻辑。常见的场景包括：

• 检查用户登录状态，未登录时跳转到登录页。
• 在路由切换时记录日志或更新标题。

全局守卫

全局守卫通过 router.beforeEach、router.afterEach 等方法定义，作用于所有路由跳转。以下是一个登录验证的示例：

// router/index.js  
router.beforeEach((to, from, next) => {  
  // 检查用户是否登录  
  const isAuthenticated = localStorage.getItem('token');  

  if (!isAuthenticated && to.path !== '/login') {  
    next('/login'); // 未登录且非登录页，重定向到登录页  
  } else {  
    next(); // 允许跳转  
  }  
});  

组件内守卫

若需为特定组件添加跳转逻辑，可使用 beforeRouteEnter、beforeRouteUpdate 或 beforeRouteLeave。例如，在离开页面前提示用户保存数据：

// SomeComponent.vue  
export default {  
  beforeRouteLeave(to, from, next) {  
    const answer = window.confirm('离开此页面会丢失未保存的数据，确定要离开吗？');  
    answer ? next() : next(false);  
  },  
};  

路由懒加载：优化应用性能

随着应用复杂度增加，一次性加载所有组件可能导致初始加载时间过长。路由懒加载通过按需加载组件，提升首屏性能。

在路由配置中，使用动态 import() 语法：

const routes = [  
  {  
    path: '/products',  
    component: () => import('../views/Products.vue'), // 按需加载  
  },  
];  

此配置会将 Products.vue 的代码拆分为独立 chunk，仅在访问 /products 时加载。

实战案例：构建电商导航系统

以下通过一个电商项目案例，演示 Vue 路由的完整配置与使用。

需求分析

• 主页（/）：展示商品列表。
• 商品详情页（/product/:id）：显示单个商品信息。
• 登录页（/login）：用户登录入口。
• 购物车（/cart）：仅登录用户可访问。

配置路由表

const routes = [  
  { path: '/', component: Home, name: 'home' },  
  {  
    path: '/product/:id',  
    component: ProductDetail,  
    name: 'product-detail',  
  },  
  { path: '/login', component: Login, name: 'login' },  
  {  
    path: '/cart',  
    component: Cart,  
    name: 'cart',  
    meta: { requiresAuth: true }, // 需要登录的元信息  
  },  
];  

实现登录验证守卫

通过元信息 meta.requiresAuth 判断是否需要验证登录状态：

router.beforeEach((to, from, next) => {  
  const isAuthenticated = localStorage.getItem('token');  

  if (to.meta.requiresAuth && !isAuthenticated) {  
    next('/login'); // 未登录时重定向  
  } else {  
    next();  
  }  
});  

编程式导航：在组件中跳转

在商品列表页点击商品时，跳转到详情页并传递 id：

// Home.vue  
methods: {  
  goToProductDetail(productId) {  
    this.$router.push({  
      name: 'product-detail',  
      params: { id: productId },  
    });  
  },  
},  

总结与实践建议

Vue 路由作为 Vue.js 生态的核心工具，提供了从基础导航到复杂场景的完整解决方案。通过本文的学习，开发者可以掌握以下技能：

1. 配置路由表并管理组件映射。
2. 使用动态路由参数和嵌套路由构建复杂页面结构。
3. 通过导航守卫实现权限控制和状态管理。
4. 优化性能，实现按需加载。

建议读者通过实际项目逐步实践，例如从搭建个人博客开始，逐步添加登录系统、文章列表、详情页等功能。随着经验积累，可探索更多高级特性，如路由元信息、滚动行为控制等。掌握 Vue 路由不仅能提升开发效率，更能为构建大型单页应用奠定坚实基础。