vue router是vue spa的导航核心，需正确安装、精准配置路由规则、稳定使用声明式与编程式导航。初始化三步：安装vue-router@4、创建router实例、main.ts中use注册；模式选history（需服务端支持）或hash（前端控制）；路由对象含path、component、name字段；跳转用或router.push。
Vue Router 是 Vue 应用的“血管系统”——它不直接呈现内容，但决定每个 URL 对应展示哪个组件、如何跳转、何时拦截、怎样传参。掌握它，等于掌握了单页应用（SPA）的导航命脉。核心就三点：装得对、配得准、用得稳。
初始化：三步完成路由接入
无论用 Vite 还是 Vue CLI 创建项目，只要选中“Router”选项，脚手架会自动生成 src/router/index.ts（或 .js）。若没选，手动补上也很简单：
- 执行
npm install vue-router@4（Vue 3 必须用 4.x 版本） - 在
src/router/index.ts中创建路由实例：导入createRouter和createWebHistory，定义routes数组，调用createRouter({ history, routes }) - 在
main.ts中通过app.use(router)注册，让整个应用感知路由能力
路由模式：history 与 hash 的实际取舍
Vue Router 提供两种基础模式，本质区别在于 URL 变化是否触发服务端请求：
-
history 模式：URL 看起来干净（如
/user/123），依赖服务器配置支持（需将所有路径 fallback 到index.html），适合生产环境和 SEO 场景 -
hash 模式：URL 带
#（如/#/user/123），完全由前端控制，无需服务端配合，适合快速验证、本地调试或部署在静态托管平台（如 GitHub Pages）
初始化时只需替换 history: createWebHistory() 为 history: createWebHashHistory() 即可切换，无代码侵入。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
路由规则：path、component、name 的协同逻辑
每条路由是一个对象，三个字段最常用且各司其职：
-
path：匹配浏览器地址栏的路径字符串，支持动态段（
/user/:id）、通配符（/404/*）、正则约束（/user/:id(\d+)） -
component：要渲染的组件，推荐使用异步引入写法
component: () => import('@/views/User.vue')，实现自动懒加载 -
name：命名路由，不是必需，但强烈建议设置。它让编程式导航更安全（
router.push({ name: 'User', params: { id: '123' } })），也便于后续做权限、缓存等元信息管理
基础使用：声明式与编程式双通道
页面内跳转有两种主流方式，适用不同场景：
-
<router-link to="/about">关于</router-link>：声明式，语义清晰、支持自动激活样式（router-link-active类）、默认渲染为a标签，适合导航菜单、按钮等静态入口 -
router.push('/home')或router.replace('/login')：编程式，写在setup或方法中，适合表单提交后跳转、权限校验失败重定向、API 返回成功后跳转等逻辑驱动场景；组合式 API 中通过useRouter()获取实例
二者底层共享同一套解析逻辑，最终都触发相同的导航流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
