2026.6.11

Vue Router

一、声明式路由完整搭建步骤

1. 初始化Vue工程
   npm create vite

进入项目目录

cd 你的项目名

安装基础依赖

npm install
2. 安装Vue Router
npm install vue-router
3. 路由配置文件（src/routers/router.js）

1. 导入路由核心API与页面组件

2. 使用createWebHashHistory创建哈希路由模式

3. 定义路由映射规则（path对应组件）

4. 导出路由实例

5. 全局注册路由（main.js）

导入router并通过app.use(router)挂载到Vue根实例

5. 页面使用路由（App.vue）

：声明式导航跳转

：路由页面渲染容器

二、路由守卫

1. 全局前置守卫 beforeEach
   每次路由跳转前触发，常用于登录权限校验、页面标题设置。

2. 全局后置守卫 afterEach
   路由跳转完成后触发，无next放行参数，多用于页面埋点统计。

三、配套实训学习资料说明

配套微头条综合实训全套文档与工程源码：

1. router创建关键步骤.md：路由基础搭建完整流程

2. 02.在Router的基础上加入Pinia.md：路由+状态管理组合使用

3. 02.weitoutiao-router.zip：微头条路由完整项目源码

4. 03.Axios的基本使用.md：网络请求基础

5. 04.Axios封装 + 模拟登录API.md：请求封装、登录鉴权接口对接，搭配路由守卫实现登录拦截逻辑

四、技术串联思路

Vue Router（页面跳转）+ Pinia（全局状态）+ Axios（接口请求），三者结合完成完整前端业务：登录鉴权、页面切换、数据请求，适配微头条实战项目。