vue路由hash实现原理
Vue路由Hash模式实现原理
Vue Router的Hash模式利用URL中的hash（#）部分实现前端路由，无需向服务器发送请求。其核心原理基于浏览器提供的hashchange事件和window.locationAPI。
核心机制
URL的hash变化不会触发页面刷新，但会记录在浏览历史中。例如：http://example.com/#/home。当hash部分变化时，浏览器会触发hashchange事件，Vue Router通过监听此事件实现路由切换。
关键实现步骤
监听hash变化
通过window.addEventListener('hashchange', callback)监听URL的hash变化，触发对应的路由组件渲染。
修改hash路径
使用window.location.hash或history.pushState（兼容性处理）主动修改hash值，更新浏览器地址栏显示。
路由映射匹配
维护一个路由映射表（routes配置），根据当前hash路径（如#/user）匹配对应的组件，通过Vue的响应式系统动态渲染。
代码示例
// 简易实现示例
class HashRouter {
constructor(routes) {
this.routes = routes;
this.currentUrl = '';
window.addEventListener('load', this.refresh.bind(this));
window.addEventListener('hashchange', this.refresh.bind(this));
}
refresh() {
this.currentUrl = window.location.hash.slice(1) || '/';
const route = this.routes.find(route => route.path === this.currentUrl);
if (route) {
// 渲染对应组件
document.getElementById('app').innerHTML = route.component;
}
}
}特点与限制
- 优点：兼容性好（支持IE8+），无需服务器配置。
- 缺点：URL带有
#不美观，SEO不友好（需额外处理）。
与History模式对比
Hash模式无需服务器支持，适合静态部署；History模式依赖服务器配置（如Nginx的try_files），但URL更简洁。选择需根据项目需求权衡。
