vue路由实现原理hash
Vue 路由的 Hash 模式实现原理
Vue Router 的 Hash 模式利用 URL 的 hash 部分（即 # 及其后的内容）来实现前端路由。这种模式的核心在于监听 hashchange 事件，并通过改变 hash 值来触发路由切换，而不会引起页面刷新。
Hash 模式的特点
- URL 中带有
#符号，例如http://example.com/#/home - Hash 的变化不会导致浏览器向服务器发送请求
- 兼容性好，支持老旧浏览器
实现机制
Hash 模式主要通过以下方式工作：
-
监听 hashchange 事件 浏览器提供了
hashchange事件，当 URL 的 hash 部分发生变化时会触发此事件。Vue Router 通过监听这个事件来响应路由变化。window.addEventListener('hashchange', () => { // 路由变化处理逻辑 }) -
改变 hash 值 通过
window.location.hash属性可以获取和设置当前 URL 的 hash 部分。改变 hash 值会触发hashchange事件。// 设置 hash 值 window.location.hash = '/about' -
路由映射 Vue Router 维护一个路由映射表，将 hash 值与对应的组件关联起来。当 hash 变化时，会根据映射表渲染相应的组件。
-
历史记录 每次 hash 变化都会在浏览器历史记录中添加一条记录，支持浏览器的前进后退功能。
实现示例
下面是一个简化版的 Hash 路由实现：
class HashRouter {
constructor() {
this.routes = {}
this.currentUrl = ''
this.init()
}
route(path, callback) {
this.routes[path] = callback || function() {}
}
refresh() {
this.currentUrl = window.location.hash.slice(1) || '/'
this.routes[this.currentUrl]()
}
init() {
window.addEventListener('load', this.refresh.bind(this), false)
window.addEventListener('hashchange', this.refresh.bind(this), false)
}
}优缺点分析
优点：
- 实现简单，兼容性好
- 不需要服务器端特殊配置
- hash 变化不会导致页面刷新
缺点：
- URL 中包含
#，不够美观 - 不利于 SEO
- 只能改变 URL 中 hash 部分，不能操作路径
与 History 模式对比
Hash 模式与 History 模式的主要区别在于：
- Hash 模式使用 URL hash，History 模式使用 HTML5 History API
- Hash 模式不需要服务器配置，History 模式需要服务器支持
- Hash 模式 URL 中有
#，History 模式 URL 更简洁
在实际项目中，如果需要更好的 URL 美观性和 SEO 支持，通常会选择 History 模式。如果项目需要兼容老旧浏览器或无法配置服务器，则选择 Hash 模式。
