vue路由的hash和history模式

原创 已于 2025-07-29 11:52:31 修改 · 527 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue-router

于 2019-09-11 15:08:50 首次发布
本文深入解析Vue-Router的两种模式：hash模式与history模式。hash模式下，页面跳转路径需带‘#/’前缀；history模式则更接近传统服务器跳转，路径简洁。文章介绍如何在路由配置中切换模式，并指出在history模式下使用Vue自带标签进行单页应用跳转的重要性。

在这里插入图片描述

vue路由的hash和history模式

Vue-Router的默认模式是hash模式。vue的hash模式的跳转路径是要在‘#/’后面加上跳转的路径，即‘#/about’这样。

如果要设置history模式可以在路由文件里的配置里修改配置，即mode：‘history’,这样更改模式的设置。而history对应的跳转路径是这样的‘/about’,不过要实现单页应用跳转的话不能用a标签，要用vue里自带的标签。该标签还可以自动的在hash模式和history模式中切换跳转的链接路径，不需要手动的去改。

Vue 路由的hash模式和history模式有什么区别
qq_30193097的博客
08-08 742
综上所述，hash模式和history模式各有优劣，选择哪种模式取决于具体的应用场景、用户需求和项目的资源。hash模式简单、兼容性强，但URL美观性和SEO较差；history模式则提供了更自然的URL和更好的SEO优化，但需要更多的配置工作和服务器支持。在Vue.js框架中，路由管理是单页面应用（SPA）不可或缺的功能。Vue 路由提供了两种模式：hash模式和history模式，这两种模式主要负责处理URL的变更而无需重新加载整个页面，实现前端路由的功能。尽管它们的基本职责相同，但两者在。
四、Vue路由的两种模式：hash模式与history模式详解和对比
qq_44849312的博客
08-20 1131
如果项目不需要考虑服务器配置，对 URL 的美观度要求不高，并且不涉及 SEO 优化，那么 Hash 模式是一个简便可行的选择。如果追求更友好的 URL，更好的 SEO 支持，同时愿意处理一些服务器配置的问题，那么可以选择 History 模式。History 模式使用浏览器的 History API，通过修改浏览器的历史记录来实现前端路由的切换。Hash 模式是 Vue Router 默认的路由模式，在这种模式下，URL 中会包含一个带有 # 符号的哈希部分，例如。
vue-router两种模式:hash模式和history模式
ai_feng123的博客
11-25 948
1. hash模式（vue-router默认hash模式） hash模式背后的原理是onhashchange事件。 window.onhashchange=function(){ let hash=location.hash.slice(1); document.body.style.color=hash; } （localtion是js里管理地址栏的内置对象，是window对象的一部分，可...
vue中路由的hash和history模式的区别
weixin_64103049的博客
08-03 446
vue中路由的hash和history模式的区别
vue 路由的hash模式和history模式
Novice-XiaoSong的博客
11-15 340
这两种模式都是属于前端路由。前端路由，顾名思义，前端使用的路由，路由不会触发向后端请求的操作，而只是为了管理前端页面。当路由路径改变时，加载相应的内容。 一、hash模式 url中会带有# 本质是使用window.onhashchange来监听url的变化（本质是#后边内容的变化），并根据url的不同加载相应内容 二、history模式 url不含#，比较优雅 本质是使用H5引入的window.history那一套东西来实现 （1）length: 当前历史记录列表的长度 （2）state: 当前历.
Vue路由中的hash和history模式
^_^
10-24 776
hash和history最明显的区别就是路径上 hash比history多一个/# 一、hash模式 在我们发请求时 例如http://localhost:8080/#/login中的 #/后面的被称为hash，当hash值发生变化时，浏览器并不会重新发送请求 发请求时并不会把hash带到浏览器请求中，但是会触发 window.hashchange事件，在这个事件参数中就可以获取到hash值，之后就会根据hash值的变化去更换路由。 window.onhashchange = (e) =&...
Vue的路由实现：hash模式 和 history模式的区别
ZXH0122的博客
12-02 273
区别： hash模式： 1.采用的是window.onhashchange事件实现。 2.可以实现前进 后退 刷新。 3.比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。 它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中， 对后端完全没有影响，因此改变hash不会重新加载页面 history模式： 1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法
Vue路由history模式解决404问题的几种方法
12-10
但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history...
vue-router中的hash和history两种模式的区别
10-18
Vue-router支持两种路由模式，分别是hash模式和history模式。下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来...
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...
vue的路由hash模式 和 history模式 区别
高先生的猫
05-20 2774
vue的路由hash模式 和 history模式 区别 1.直观区别： hash模式url带#号，history模式不带#号。 2.深层区别： hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。 如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传 功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的， 把这个页面分享到第三方的app里，有的app里面url是
Vue-router 中hash模式和history模式的区别
ying_ying7的博客
01-31 612
一、hash模式 地址栏 URL 中的 # 符号。比如这个 URL：http://www.ittest.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 二、history模式 利用了 html5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录
vue-路由History模式
qq_46606159的博客
03-26 415
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。 如果不想要丑丑的hash，我们可以用路由的hash模式，这种模式充分利用history.pushuState API来完成URL跳转而无需重新加载页面。 const router = new VueRouter({ mode: 'history', // mode: ...
vue路由模式：路由的hash和history模式的区别
单口相声Jay
03-27 1375
hash模式适用于兼容性要求较高的应用，而history模式适用于需要进行SEO优化的应用。
Vue hash 路由和 history 路由的区别
honeyhyang的博客
05-23 4881
最明显之差别： （1）在url显示： hash有#很Low ； history 无#好看 （2）回车刷新： hash 可以加载到hash值对应页面 ； history一般就是404掉了 （3）支持版本： hash支持低版本浏览器和IE浏览器 ； historyHTML5新推出的AP...
介绍Vue router的history模式以及如何配置history模式
m0_62396648的博客
07-08 1万+
history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。在history模式下，URL看起来更加整洁，没有#符号。例如，history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验。
vue 路由模式hash与history区别
博客模板
07-20 323
vue默认hash模式 带/#/看着难看 history模式 url必须一致才能访问，如果不一致要访问，则需要使用nginx做映射
vue路由的两种模式：hash与history的区别
热门推荐
qq_26780317的博客
06-11 2万+
前言：众所周知，vue-router有两种模式，hash模式和history模式，下面来看看两者的区别。 一、基本情况 直观区别：hash模式url带#号，history模式不带#号。 1.hash模式 hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也被称为锚点，本身是用来做页面定位的，它可以是对应的id元素显示在可视区域内。 由于hash值变化不会导致游览器向服务器发出请求，而且hash改变会...
Vue进阶（七十七）：vue 路由的两种模式：hash与history_vue创建中的history
2401_84447233的博客
04-29 1991
一、为了达到这个目的，浏览器提供了hash与history两种支持：为什么这两种模式实现了？hashURLhashhash#/hellohashURLHTTPhashhistory这两个方法应用于浏览器的历史记录栈，在当前已有的backforwardgo基础上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。
vue路由的hash和history模式的区别
最新发布
12-02
<think> 我们正在讨论Vue路由的hash模式和history模式的区别。根据引用内容，我们可以总结出以下几点区别： 1. **URL格式**: - hash模式: URL中包含`#`符号，例如`http://example.com/#/home`。路由信息位于hash部分（`#`之后）。 - history模式: URL是标准的路径格式，例如`http://example.com/home`。路由信息位于路径部分。 2. **浏览器兼容性**: - hash模式: 兼容所有浏览器，包括旧版浏览器。 - history模式: 依赖HTML5 History API，因此不支持IE9及以下版本。需要现代浏览器支持。 3. **可读性与SEO**: - hash模式: URL中带有`#`，看起来不太美观，且hash部分的内容不会被发送到服务器，因此不利于SEO（搜索引擎优化）。 - history模式: URL更加简洁美观，且路径信息可以被搜索引擎爬取，有利于SEO。 4. **刷新页面行为**: - hash模式: 刷新页面时，由于hash值不会被包含在HTTP请求中，因此服务器只需要返回同一个HTML文件（通常为index.html），不会出现404错误。 - history模式: 刷新页面时，浏览器会向服务器请求当前URL对应的资源。如果服务器没有配置覆盖所有路由请求的规则（即所有路由都返回index.html），则会导致404错误。因此，使用history模式时，需要在服务器端配置一个回退路由（fallback），确保任何路径都返回应用的主页面。 5. **传参能力**: - hash模式: 通过URL的hash部分传递参数，有长度限制（因为URL总长度有限制）。 - history模式: 可以通过路径（path）和状态对象（state）传递参数，能够传递更复杂的数据。 6. **锚点功能**: - hash模式: 由于使用了`#`，会与页面内锚点（anchor）功能冲突，即无法同时使用页面内的锚点跳转。 - history模式: 不会与锚点功能冲突，因为URL中没有`#`。 7. **实现原理**: - hash模式: 基于`window.location.hash`和`hashchange`事件。当hash改变时，页面不会重新加载。 - history模式: 基于HTML5 History API，使用`pushState()`和`replaceState()`方法来操作浏览器的历史记录栈，同时监听`popstate`事件来处理前进和后退。 **总结与选择建议**: - 如果需要兼容旧浏览器（如IE9以下）或者项目对SEO要求不高，可以选择hash模式，因为它配置简单，无需服务器额外配置。 - 如果项目需要更好的SEO支持，且用户使用现代浏览器，可以选择history模式，但需要服务器配置支持（将所有路径请求重定向到index.html）。 下面是一个简单的服务器配置示例（以Nginx为例）： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这样配置后，当用户刷新页面或直接访问某个路由时，Nginx会尝试查找对应的文件或目录，如果找不到，就会返回`index.html`，然后由前端路由处理。 ### 相关问题 1. 如何配置Vue Router使用history模式？ 2. 在history模式下，如何解决页面刷新出现404的问题？ 3. hash模式和history模式在Vue Router中如何切换？ 4. history模式中，`pushState`和`replaceState`方法有什么区别？ 5. 为什么hash模式不会导致页面刷新时出现404错误？ </think> ### Vue路由中Hash模式与History模式的区别 #### 1. **URL格式差异** - **Hash模式** URL包含`#`符号，路由信息位于哈希部分： `http://example.com/#/user/profile` 特点：哈希符号后的内容不会发送到服务器[^2][^4]。 - **History模式** 使用标准URL路径格式： `http://example.com/user/profile` 特点：URL更简洁，符合常规路径结构[^2][^3]。 #### 2. **实现原理** - **Hash模式** 基于浏览器`location.hash`和`hashchange`事件： ```javascript window.addEventListener(&#39;hashchange&#39;, () => { // 处理路由变化 }); ``` 哈希变化不会触发页面刷新[^1][^4]。 - **History模式** 依赖HTML5 History API： ```javascript history.pushState({}, &#39;&#39;, &#39;/new-route&#39;); // 添加新路由 window.addEventListener(&#39;popstate&#39;, handleRouting); // 监听前进/后退 ``` 需浏览器支持History API（IE10+）[^1][^3]。 #### 3. **SEO优化** - **Hash模式** 哈希部分内容不会被搜索引擎爬取，不利于SEO优化[^2][^3]。 - **History模式** 完整URL可被搜索引擎索引，适合需要SEO的场景[^2][^3]。 #### 4. **服务器配置要求** - **Hash模式** 无需服务器特殊配置，刷新页面或直接访问URL均能正常加载[^1]。 - **History模式** 需服务器配置（以Nginx为例）： ```nginx location / { try_files $uri $uri/ /index.html; # 所有路径回退到index.html } ``` 否则刷新页面会导致404错误[^5]。 #### 5. **兼容性与传参** | **特性** | **Hash模式** | **History模式** | |----------------|----------------------------|------------------------------| | 浏览器兼容性 | 支持所有浏览器（包括IE9-）[^2] | 需IE10+或现代浏览器[^3] | | URL参数传递 | 通过URL哈希传参，有长度限制[^4] | 可通过路径参数或state对象传递[^4] | | 锚点功能 | 与原⽣锚点功能冲突[^4] | 可正常使用锚点 | #### 6. **刷新页面行为** - **Hash模式** 刷新后路由状态保持不变，因为哈希值属于客户端状态[^2]。 - **History模式** 刷新会向服务器发送完整路径请求，需后端配合返回入口文件[^5]。 ### 选择建议 - 选 **Hash模式** 如果： ✅ 需要兼容旧版浏览器 ✅ 无SEO需求 ✅ 不想配置服务器 - 选 **History模式** 如果： ✅ 需要SEO优化 ✅ 追求URL美观 ✅ 可配置服务器支持 > 示例：电商网站推荐History模式（SEO关键），内部管理系统可选Hash模式（简化部署）[^3]。 ### 相关问题 1. 如何配置Vue Router使用History模式？ 2. 为什么History模式刷新页面会出现404错误？如何解决？ 3. Hash模式路由参数的长度限制是多少？ 4. Vue Router如何检测浏览器是否支持History API？ 5. 在History模式下，如何实现路由守卫？ [^1]: vueRouter history模式和hash模式的区别。今天我们来谈谈vue 的路由vueRouter。我将会分2篇文章来带大家彻底理透vueRouter的原理。但要理解vueRouter，我们首先得了解vueRouter的两种模式 故，今天，我们先说说vueRouter的两种模式 history模式hash模式 初步了解。 [^2]: vue路由模式：路由的hash和history模式的区别。 路由的hash模式和history模式用于处理浏览器URL和页面之间的映射关系，两者有以下区别： 1. URL格式不同：hash模式将路由信息存放在URL的hash中，如http://example.com/#/path；history模式将路由信息放在URL的路径中，如http://example.com/path。 2. 支持程度不同：hash模式支持所有浏览器，而history模式需要浏览器支持HTML5的history API。 3. 可读性不同：hash模式的URL更加有意义，因为hash前的URL表示了服务器的路径，而hash后面的路由信息表示了客户端的状态；history模式的URL只表示客户端状态，没有服务器路径。 4. SEO优化不同：hash模式的路由信息不会被搜索引擎爬取，而history模式的路由信息可以被搜索引擎爬取。因此，如果需要进行SEO优化，建议采用history模式。 [^3]: Vue 路由的hash模式和history模式有什么区别。综上所述，hash模式和history模式各有优劣，选择哪种模式取决于具体的应用场景、用户需求和项目的资源。hash模式简单、兼容性强，但URL美观性和SEO较差；history模式则提供了更自然的URL和更好的SEO优化，但需要更多的配置工作和服务器支持。 [^4]: vue路由的两种模式：hash与history的区别。 首先，hash本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash的传参是基于url的，如果要传递复杂的数据，会有体积的限制，而history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。 [^5]: vue中hash和history的区别。3. history模式下有一个问题，就是当页面刷新时，他会实实在在的发送请求，把url给传送过去，因此，如果后端没有做处理的话，就会因找不到资源而报404错误，因此使用history模式时可以跟后端进行配合
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值