4个 Vue 路由实现的过程

大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻‍💻，关注我，科技未来或许我能帮到你！

Vue 路由相信朋友们用的都很熟了，但是你知道 Vue 路由是如何实现的吗？

其实，前端路由是通过监听URL的变化，然后根据不同的URL路径显示不同的页面内容。

而 Vue 路由的实现，大体可归结为这 4 个过程：

下面我拆成 5 部分来一一讲解！

一、检测 URL 变化

说起检测 URL 变化，主要是还是聊聊 Vue 的两种路由模式。

1、Hash 模式

Hash 模式是指在 URL 中添加 # 符号，例如：xxx/#/path。

核心机制：通过 window.location.hash 修改 URL 的哈希部分（即 # 后的内容），并配合使用 hashchange 事件实现检测 URL 变化。

兼容性：支持所有浏览器（包括 IE9 及以下）。

2、History 模式

History 模式是指在 URL 中无 # 符号，路径更简洁，例如：xxx/path。

核心机制：通过 HTML5 的 history.pushState()  或  history.replaceState() 方法修改路径，并配合使用 popstate 事件实现检测 URL 变化。

兼容性：依赖 HTML5 History API，支持 IE10+ 及现代浏览器，且需配置服务器将所有请求重定向到首页，避免 404 错误。

二、匹配路由

提取当前 URL 的路径（如 /user/123），遍历路由表（routes 数组），找到与当前路径匹配的路由规则。

一旦匹配到路由后，会将路由对应的组件、元信息（meta）、动态参数（params）以及查询参数（query）等数据整合在一起，生成一个路由对象（如 { path: '/xxx', component: xxx, ... }）。

三、执行守卫

在路由切换前，依次执行各类导航守卫做权限/数据等检查。

如果守卫中调用了 next(false)，或者抛出了错误，就会中断导航。如果守卫异步逻辑执行成功，并调用 next()，则继续执行下一个守卫，直到所有守卫执行完毕。

四、更新状态

通常，路由对象会存放在一个响应式数据源（如 currentRoute）中。

当我们给 currentRoute 赋值一个新的路由信息时，就会触发依赖它的组件（如 <router-view>）更新。

五、渲染组件

最后走 Vue 数据响应式更新那一套，完成页面重新渲染。

关于 Vue 数据响应式原理，不懂的朋友可以看我之前的内容哈！

好了，今天要分享的内容就是这么多，联系和更多内容在绿色App搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~