Vue Router

Vue Router 是 Vue.js 框架的官方路由库，负责在单页应用（SPA）中管理页面地址与组件视图之间的映射关系，使应用能在不刷新整页的前提下切换视图。

概述

Vue Router 与 Vue 深度集成，由 Vue 官方团队维护，是 Vue 生态的核心组成部分。它通过监听浏览器地址变化，将不同的路径匹配到对应的组件并渲染，从而在客户端实现多页面般的导航体验，同时保持单页应用的流畅性。

核心特点

• 路由映射：将 URL 路径与组件建立对应关系，支持动态参数与查询参数。
• 嵌套路由：允许在父视图中嵌套子视图，契合复杂界面的层级结构。
• 导航守卫：提供全局、路由级与组件级的钩子，可在跳转前后执行权限校验、数据预取等逻辑。
• 历史模式：支持基于历史记录接口的干净地址与基于哈希的兼容模式，适配不同部署环境。

应用场景

Vue Router 是几乎所有 Vue 单页应用的标配，用于实现页面切换、登录鉴权拦截、面包屑导航与滚动行为控制等。配合懒加载可按需加载路由对应的组件代码，减小首屏体积，提升加载性能。

常见问题

问：历史模式部署后刷新页面出现找不到，怎么办？答：历史模式需要服务端将未匹配的路径回退到入口页面，否则直接访问子路径会报错。需在服务器或托管平台配置相应的回退规则。

问：路由懒加载有什么好处？答：懒加载将各路由的组件拆分为独立代码块，仅在访问时才加载，能显著减小初始包体积、加快首屏渲染。