History 和 Hash 路由模式
一、History 路由模式
1.1、原理
History 路由模式使用 HTML5 的 History API (window.history.pushState()
和window.history.replaceState()
) 实现前端路由,可以让页面在前进后退时保持当前状态,让 URL 地址看起来像是普通网站一样。
1.2、优缺点
优点:
-
URL 地址更直观:让用户在前进和后退时看到正确的 URL 地址。
-
SEO 优化:搜索引擎对 HTML5 history API 更友好,对单页应用进行搜索引擎优化时容易实现。
-
体验更好:用户在前进后退时不用再次加载页面,更流畅的页面体验。
缺点:
-
浏览器兼容性:HTML5 history API 不能在低版本浏览器中使用,需要考虑兼容性问题。
-
维护代码:使用 History 路由模式实现路由功能需要更多的代码维护,代码实现难度更高。
- 耗资源:每访问一个页面都需要向服务器发送请求(即 URL 变更后导致页面的刷新,除前进后退),进行路由匹配,生成 html 文件,然后再响应给浏览器,消耗了服务器大量资源,对服务器造成较大的压力。
- 404 错误:直接访问嵌套路由时,会报 404 错误,即页面找不到的问题。
- 需配置服务器:这里以 nginx 配置为例:
-
- 部署到根目录
server { listen 80; location / { # 用于配合 History 使用 try_files $uri $uri/ /index.html; } }
-
- 部署到非根目录
server { listen 80; server_name localhost; location /sub/ { # 这里是打包文件 dist 内文件的存放路径 alias /srv/www/project/; index index.html index.htm; try_files $uri $uri/ /sub/index.html; } }
1.3、实现示例
- 原生代码实现示例:
使用 History 路由模式的简单代码示例:
const routes = { home: { path: '/', render: () => { const content = document.querySelector('#content'); content.innerHTML = '<h1>Home Page</h1>'; } }, about: { path: '/about', render: () => { const content = document.querySelector('#content'); content.innerHTML = '<h1>About Page</h1>'; } }, contact: { path: '/contact', render: () => { const content = document.querySelector('#content'); content.innerHTML = '<h1>Contact Page</h1>'; } } }; window.addEventListener('popstate', () => { const path = window.location.pathname; for (const key in routes) { if (routes[key].path === path) { routes[key].render(); } } }); const nav = document.querySelector('#nav'); for (const key in routes) { const a = document.createElement('a'); a.href = routes[key].path; a.innerText = key[0].toUpperCase() + key.slice(1); a.addEventListener('click', e => { e.preventDefault(); history.pushState({}, '', e.target.href); routes[key].render(); }); nav.appendChild(a); }
在上面的代码中,我们定义了一个路由表 routes
,其中的键值对表示 URL Pathname 与对应的路由信息。通过监听 popstate
事件,我们可以在浏览器前进、后退等操作时动态获取当前的 URL Pathname,并从路由表中获取对应的路由信息,最后执行该路由的 render
方法即可。此外,我们还在 <nav>
元素中动态生成了导航链接,并为每个链接绑定了点击事件,通过使用 history.pushState
方法改变 URL,并在相应的时候触发渲染。
- Vue 代码实现示例:
<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view /> </div> </template>
在上面的代码中,使用了 router-link
组件来实现路由导航,并使用 router-view
组件来展示当前路由对应的组件。
在路由的配置中,我们已经定义了两个路由:/
和 /about
,对应的组件分别是 HomePage
和 AboutPage
。
在页面中,使用 router-link
组件的 to
属性指定要跳转的路由地址,当用户点击该链接时,路由会根据地址自动切换到对应的路由,并在 router-view
组件中展示对应的组件。
// 定义路由配置 const routes = [ { path: '/', component: HomePage }, { path: '/about', component: AboutPage } ]; // 创建路由实例 const router = new VueRouter({ mode: 'history', routes }); // 创建 Vue 实例并挂载路由 new Vue({ router, render: h => h(App) }).$mount('#app');
mode
参数设置为'history'
即可实现 History 路由模式 。二、Hash 路由模式
2.1、原理
Hash 路由模式是使用 URL 中的 hash 值实现前端路由,通过window.location.hash
改变 URL 中的 Hash 值,监听 window.onhashchange
事件,控制页面的状态,从而实现不同页面间的跳转,例如 #/home、#/about。
2.2、优缺点
优点:
-
兼容性好:Hash 路由模式适用于不支持 HTML5 history API 的低版本浏览器。
-
简单实现:Hash 路由模式比 History 路由模式实现简单,不需要服务器任何配置。
- 页面刷新:页面跳转时无需刷新页面,页面初次加载完成后,对服务器资源的消耗较少,从而对服务器造成的压力也较小。
缺点:
-
URL 不直观:用户看到的 URL 地址不够直观,可读性差。
-
SEO 受影响:对于单页应用来说,使用 Hash 路由模式实现路由功能时,SEO 优化会受到影响。
- 与锚点同时使用时,存在刷新页面时失效问题:如果页面刷新后 URL 中的 Hash 值不存在,那么页面会重新加载,这时页面的状态就会丢失。
- 白屏问题:页面初次加载时,需要等待大量静态资源文件的加载,因此用户等待时间稍长,就会出现白屏问题。
2.3、实现示例
- 原生代码实现:
使用 Hash 路由模式的简单代码示例:
const routes = { home: { render: () => { const content = document.querySelector('#content'); content.innerHTML = '<h1>Home Page</h1>'; } }, about: { render: () => { const content = document.querySelector('#content'); content.innerHTML = '<h1>About Page</h1>'; } }, contact: { render: () => { const content = document.querySelector('#content'); content.innerHTML = '<h1>Contact Page</h1>'; } } }; window.addEventListener('hashchange', () => { const hash = window.location.hash.slice(1) || 'home'; const route = routes[hash]; if (route) { route.render(); } }); const nav = document.querySelector('#nav'); for (const key in routes) { const a = document.createElement('a'); a.href = `#${key}`; a.innerText = key[0].toUpperCase() + key.slice(1); nav.appendChild(a); }
在上面的代码中,我们定义了一个路由表 routes
,其中的键值对表示 URL Hash 与对应的路由信息。通过监听 hashchange
事件,我们可以在 URL Hash 发生变化时,动态获取当前的 Hash 值,并从路由表中获取对应的路由信息,最后执行该路由的 render
方法即可。此外,我们还在 <nav>
元素中动态生成了导航链接。
- Vue 代码实现:
<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view /> </div> </template>
Hash 路由模式代码示例:
// 定义路由配置 const routes = [ { path: '/', component: HomePage }, { path: '/about', component: AboutPage } ]; // 创建路由实例 const router = new VueRouter({ mode: 'hash', routes }); // 创建 Vue 实例并挂载路由 new Vue({ router, render: h => h(App) }).$mount('#app');
将 mode
参数设置为'hash'
即可实现 Hash 路由模式。
三、锚点
锚点(Anchor)是 HTML 中的一种特殊的标签,可以用于实现页面内的链接跳转。
锚点代码示例:
<!-- 在页面中创建目标位置 --> <h2 id="target">Target Section</h2> <!-- 创建链接 --> <a href="#target">Jump to Target Section</a>
在上面的代码中,我们通过 id
属性创建了一个锚点目标,然后通过链接标签 a
创建了一个链接,链接的目标是页面中的 #target
锚点。当用户点击该链接时,页面会跳转到目标位置(即锚点)。
Hash 路由模式和锚点都是用于实现页面内的链接跳转,但是 Hash 路由模式更加高级,可以实现单页面应用的效果,而锚点只是一个简单的链接跳转。
四、总结
总的来说,选择使用 History 路由模式还是 Hash 路由模式取决于具体的需求,如果需要使用 SEO 优化或者追求更好的用户体验,使用 History 路由模式是更好的选择。但如果不需要 SEO 优化,或者兼容性要求更高,使用 Hash 路由模式可以更简单实现路由功能。
此外,现在也有一些路由方案结合了 History 路由模式和 Hash 路由模式的优点,可以同时解决它们的缺点,比如使用 Hashbang 形式的路由方案。
最后,不管选择哪种路由模式,开发者都需要注意兼容性问题,并结合项目的需求进行合理的选择。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库