11、吃透Vue Router：从前端路由演变到手写迷你版，实战要点全解析
吃透Vue Router：从前端路由演变到手写迷你版，实战要点全解析
在Vue项目开发中，vue-router是不可或缺的核心模块——它掌管着页面的跳转与组件的渲染，是单页应用（SPA）的灵魂。你是否曾好奇：前端路由是如何从后端掌控演变为前端自主控制的？hash模式和history模式的底层原理是什么？如何从零手写一个可用的迷你vue-router？
本文将从「历史演变→原理剖析→手写实现→实战要点」全维度拆解vue-router，让你彻底吃透这个核心工具！
一、前后端开发模式的演变：前端路由因何而来？
要理解前端路由，首先要回顾Web开发的「路由控制权」变迁：
1. jQuery时代：后端主导的路由模式
在jQuery主导的年代，前端几乎没有路由的概念——所有页面跳转都依赖后端模板（JSP、Smarty等）渲染，前端代码嵌入在后端模板中。每次页面跳转都会触发整页刷新，流程如下：
- 用户访问URL → 后端接收请求 → 渲染对应模板 → 返回完整HTML页面 → 浏览器刷新展示。
这种模式的优点是开发速度快，但缺点也致命：前后端耦合严重、页面跳转卡顿、前端无法独立部署。
2. SPA时代：前端接管路由
为解决整页刷新的痛点，前端开发者借助pushState + Ajax（Pjax）实现了「无刷新跳转」，这就是SPA（单页应用）的雏形。如今Vue/React/Angular主导的SPA模式，核心逻辑是：
- 无论访问哪个URL，后端都返回同一个前端入口文件
index.html； - 前端通过JavaScript解析URL，动态渲染匹配的组件；
- 页面跳转仅修改URL，不触发整页刷新。
这一转变让前端获得了路由的绝对控制权，也实现了前端项目的独立部署，交互体验也实现了质的飞跃。
二、前端路由的实现原理：hash vs history
前端路由的核心是「修改URL但不刷新页面」，目前主流有两种实现方式，对应vue-router的createWebHashHistory和createWebHistory。
1. hash模式（哈希路由）
- 核心特征：URL中通过
#分隔路由（如http://xxx.com/#/login），#后的内容不会被发送到后端； - 底层原理：
#的变化会触发hashchange事件，且不会刷新页面。通过监听该事件，即可解析路由并渲染对应组件：
// 监听hash变化
window.addEventListener('hashchange', () => {
const currentPath = window.location.hash.slice(1) || '/'
// 渲染对应组件的逻辑
})
- 优点：无需后端配合，兼容性好；
- 缺点：URL带
#，不够美观。
2. history模式（历史路由）
- 核心特征：URL与普通地址无差异（如
http://xxx.com/login），依赖HTML5的新API； - 底层原理：通过
history.pushState()/history.replaceState()修改URL（不触发页面刷新），监听popstate事件捕获路由变化：
// 监听历史记录变化（仅浏览器回退/前进触发）
window.addEventListener('popstate', () => {
const currentPath = window.location.pathname || '/'
// 渲染对应组件的逻辑
})
// 主动修改URL（需手动更新路由状态，因为pushState不触发popstate）
history.pushState({}, '', '/login')
- 优点：URL美观，符合用户习惯；
- 缺点：需要后端配合（配置兜底路由，避免刷新404），兼容性依赖HTML5。
三、手写迷你Vue Router（hash模式）
理解原理后，我们从零实现一个极简版的vue-router（hash模式），核心包含4个部分：路由实例创建、install注册、RouterView、RouterLink。
步骤1：创建核心路由逻辑（src/router/grouter/index.js）
import { ref, inject } from 'vue'
import RouterLink from './RouterLink.vue'
import RouterView from './RouterView.vue'
// 注入路由实例的唯一key
const ROUTER_KEY = '__router__'
/**
* 创建路由实例
* @param {Object} options - 路由配置（history、routes）
* @returns {Router} 路由实例
*/
function createRouter(options) {
return new Router(options)
}
/**
* 全局获取路由实例
* @returns {Router} 路由实例
*/
function useRouter() {
return inject(ROUTER_KEY)
}
/**
* 创建hash模式的路由历史
* @returns {Object} 包含事件绑定、当前URL的对象
*/
function createWebHashHistory() {
// 绑定hashchange事件
function bindEvents(fn) {
window.addEventListener('hashchange', fn)
}
return {
bindEvents,
// 获取当前hash路由（去掉#）
url: window.location.hash.slice(1) || '/'
}
}
/**
* 路由核心类
*/
class Router {
constructor(options) {
// 保存路由历史（hash模式）
this.history = options.history
// 路由配置表
this.routes = options.routes
// 响应式的当前路由地址
this.current = ref(this.history.url)
// 监听hash变化，更新当前路由
this.history.bindEvents(() => {
this.current.value = window.location.hash.slice(1)
})
}
/**
* 安装路由插件（Vue.use的核心）
* @param {App} app - Vue应用实例
*/
install(app) {
// 提供路由实例（全局可通过useRouter获取）
app.provide(ROUTER_KEY, this)
// 注册全局组件：router-link、router-view
app.component('router-link', RouterLink)
app.component('router-view', RouterView)
}
}
export { createRouter, createWebHashHistory, useRouter }
步骤2：实现RouterView组件（src/router/grouter/RouterView.vue）
RouterView是路由的「渲染容器」，核心逻辑是根据当前路由匹配对应组件并动态渲染：
步骤3：实现RouterLink组件（src/router/grouter/RouterLink.vue）
RouterLink是路由的「跳转链接」，核心是通过#修改hash值，实现无刷新跳转：
步骤4：使用自定义的迷你Router
在src/router/index.js中引入并使用：
import { createRouter, createWebHashHistory } from './grouter/index'
// 定义路由配置
const routes = [
{ path: '/', component: () => import('@/views/Home.vue') },
{ path: '/about', component: () => import('@/views/About.vue') }
]
// 创建路由实例
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
至此，一个支持hash模式的迷你vue-router就完成了！核心逻辑与官方版一致，只是简化了边界处理（如正则匹配、路由嵌套等）。
四、Vue Router实战核心要点
掌握原理后，这些实战技巧能让你更高效地使用vue-router：
1. 动态路由：匹配可变路径
当需要为一类页面（如用户详情）配置统一路由时，可使用「动态参数」：
const routes = [
// :id是动态参数，匹配/user/1、/user/2等路径
{ path: '/user/:id', component: () => import('@/views/User.vue') }
]
// 在组件中获取动态参数
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id) // 输出当前用户ID
2. 导航守卫：权限控制利器
导航守卫能在路由跳转前/后执行逻辑，最常用的场景是「权限校验」（如仅管理员可访问后台）：
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 判断是否需要登录权限
if (to.meta.requiresAuth) {
const isLogin = localStorage.getItem('token')
if (isLogin) {
next() // 已登录，允许跳转
} else {
next('/login') // 未登录，跳转到登录页
}
} else {
next() // 无需权限，直接放行
}
})
3. 路由懒加载：优化首屏加载
当项目体积较大时，可将非首屏路由组件「按需加载」，减少首屏JS体积：
const routes = [
// 懒加载（访问/home时才加载）
{ path: '/home', component: () => import('@/views/Home.vue') }
]
五、扩展思考：如何实现history模式的迷你Router？
前文实现了hash模式，要实现history模式只需修改3处：
- 替换
createWebHashHistory为createWebHistory：
function createWebHistory() {
function bindEvents(fn) {
// 监听popstate事件（仅浏览器回退/前进触发）
window.addEventListener('popstate', fn)
}
return {
bindEvents,
// 获取当前路径（无#）
url: window.location.pathname || '/'
}
}
- 修改RouterLink的href（去掉#，手动控制跳转）：
- 后端配置兜底路由（关键！）：
history模式下，刷新页面会直接请求对应URL，后端需配置「所有请求都返回index.html」（以Nginx为例）：
location / {
try_files $uri $uri/ /index.html;
}
六、总结
本文从「历史→原理→手写→实战」全维度拆解了vue-router：
- 历史演变：前端路由是SPA的必然产物，核心是「无刷新修改URL」；
- 核心原理：hash模式依赖
hashchange，history模式依赖pushState + popstate； - 手写实现：核心是「响应式current + 动态组件渲染 + 事件监听」；
- 实战要点：动态路由、导航守卫、懒加载是提升开发效率的关键。
理解vue-router的底层逻辑，不仅能帮你解决开发中的各种路由问题，更能让你在面对复杂场景时（如自定义路由拦截、扩展路由功能）游刃有余。
思考题
你还能为这个迷你vue-router扩展哪些功能？比如：
- 支持路由嵌套；
- 实现全局后置守卫；
- 增加路由参数的正则匹配。
欢迎在评论区留下你的思路，一起交流进步！
