vue-router的两种模式Hash和History_番茄啊土豆的博客-CSDN博客
vue-router的两种模式Hash和History
番茄啊土豆
于 2018-09-29 16:37:25 发布
3267
收藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangfeng1742/article/details/82897697
版权
单页应用（SPA）采用前端路由成为当前主流，通过改变 URL，在不重新请求页面的情况下，更新视图。目前，主要有两种实现方式：
1.hash：利用 URL 中的hash（# 符号）
# 代表网页中的一个位置，其右面的字符，就是该位置的标识符。比如：
http://www.example.com/index.html#print
就代表网页index.html的print位置。浏览器读取这个 URL 后，会自动将print位置滚动至可视区域。
为网页位置指定标识符的方法有两种：
一、使用锚点，比如<a name="print"></a>
二、使用id属性，比如<div id="print" >
# 本身及其右边字符称之为hash，可通过window.location.hash属性读取，具有如下特点：
# 是用来指导浏览器动作的，对服务器端完全无用。所以，http请求中不包括 #
改变hash，浏览器只会滚动到相应位置，不会重新加载网页
可以为hash的改变添加监听事件：
window.addEventListener("hashchange", funcRef, false)
每一次改变hash，都会在浏览器的访问历史中增加一个记录
利用hash的以上特点，就可以实现前端路由“更新视图但不重新请求页面”的功能了
2.history：利用HTML5 History Interface中新增的方法
History Interface是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。从HTML5开始，History Interface提供了两个新的方法：pushState() 和 replaceState()，使得我们可以对浏览器历史记录栈进行修改：
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 URL 改变了，但浏览器不会立即发送请求（the browser won't attempt to load this URL after a call to pushState()），这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础
两种模式比较
在一般场景中，hash模式与history模式是差不多的，但几乎所有的文章都推荐使用history模式，理由竟然是："#" 符号太丑
history与hash相比，存在很多优势（省略百字，见下文链接）
但是，history存在一个问题
对于单页应用来讲，理想的使用场景是仅在进入应用时加载index.html，后续操作通过ajax来完成，不会根据 URL 重新请求页面，但是难免遇到特殊情况，比如用户直接在地址栏中输入并回车，浏览器刷新或者重启
hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的：
http://oursite.com/#/user/id // 如重新请求只会发送http://oursite.com/
所以在hash模式下，当 URL 改变时，页面不会重新加载
而在history模式下，URL 就是正常的 URL（建议：前端路由 URL 和后端保持一致）
http://oursite.com/user/id
在此情况下重新（刷新F5）向后端发送请求，如后端没有配置对应/user/id的路由处理，则会返回404错误。
官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
如果这么做，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后再给出一个 404 页面。如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。
vue官网提供了很多后端配置的例子：https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
我当前项目使用 spring 框架，配置也很简单，只需在 web.xml 下添加 error-page 标签
<error-page>
<error-code>404</error-code>
<location>/WEB-INF/404.jsp</location>
</error-page>
特别注意：404.jsp 页面大小 > 1024b
参考
从 vue-router 看前端路由的两种实现：https://zhuanlan.zhihu.com/p/27588422 
vue中mode hash 和 history的区别：https://blog.csdn.net/lyn1772671980/article/details/80804419
url中#的作用：https://blog.csdn.net/luka2008/article/details/38753269
解决vue router 使用 history 模式刷新后404问题：https://www.jb51.net/article/119075.htm
web.xml 中 error-page 的正确用法：http://www.cnblogs.com/sharpest/p/6108652.html
vue-router路由使用history模式时，后端如何配置：https://blog.csdn.net/wenmin1987/article/details/81069604
番茄啊土豆
关注
关注
点赞
收藏
打赏
评论
vue-router的两种模式Hash和History
单页应用（SPA）采用前端路由成为当前主流，通过改变 URL，在不重新请求页面的情况下，更新视图。目前，主要有两种实现方式：1.hash：利用 URL 中的hash（# 符号）# 代表网页中的一个位置，其右面的字符，就是该位置的标识符。比如： http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器...
复制链接
扫一扫
vue-router中的hash和history两种模式的区别
10-18
大家都知道vue-router有两种模式，hash模式和history模式，这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
vue-router的hash模式与history模式的区别
小柠檬爱编程
09-07
249
为什么要有 hash 和 history这两种模式呢？
对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不向后端发出请求.
1、hash 模式：
即地址栏URL中的 # 符号。
比如这个URL：http://www.abc.com/#/hello, hash 的值为 #/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此
参与评论
您还未登录，请先
登录
后发表或查看评论
VueRouter的两种模式
最新发布
weixin_43611411的博客
11-09
339
VueRouter的两种模式——学习笔记
vue-router的hash模式和history模式详解
weixin_33734785的博客
04-11
2281
参考来源：
从头开始学习vue-router
面试官: 你了解前端路由吗?
一、vue-router是什么
​vue-router就是WebApp的链接路径管理系统。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 ...
【Vue】Vue-router中的history模式和hash模式
公众号：前端充电宝
08-18
290
为了构建SPA（单页面应用），Vue引入了前端路由Vue-Router，前端路由的核心就是在改变视图的同时不会向后端发起请求。Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。
vue-router详解，包括hash和history
yanhua1575的博客
07-23
281
1.Vue程序运行过程
npm run build
npm run dev
2.认识路由
路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动.
路由器提供了两种机制: 路由和转送.
路由是决定数据包从来源到目的地的路径.
转送将输入端的数据转移到合适的输出端.
路由中有一个非常重要的概念叫路由表.
路由表本质上就是一个映射表, 决定了数据包的指向.
后端路由阶段
...
重识Vue路由两种模式-hash和history
flym_的博客
05-27
741
vue-router的工作原理
单页面应用(SPA)的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的vue-router。
在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。
hash和history的区别
hash模式的url后跟hash值#…，它的原理就是使用window.onHashChange来监听hash值的改变，一
vue-router的两种路由模式hash和history，区别以及它们的底层实现原理
wanghe1111_的博客
03-13
3804
vue的两种路由模式hash和history模式以及它们的底层实现原理
Vue-router路由跳转的两种模式hash和history
kksw1121
05-26
2224
Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌，在前端通过配置路由来跳转页面，不需要请求服务器
Vue-Router提供两种路由跳转模式：哈希模式（hash mode） 历史模式（history mode）
Vue-Router 默认使用 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。使用hash模式时URL中始终有#号
如果不希望你的URL带有#，可以选择使用 h
Vue Router的路由模式 hash 和 history 的实现原理
weixin_52688746的博客
07-19
2147
Vue Router的路由模式 hash 和 history 的实现原理
1. hash 模式的实现原理：
早期的前端路由的实现就是基于 location.hash 来实现的，其实他的原理很简单， location.hash 的值就是URL中 # 后面的内容
如：[https://www.word.com#search](https://www.word.com#search) 它的location.hash的值是 #search
hash 路由模式的实现主要是基于下面几个特点：
URL 中的 has
关于hash和history的区别和使用
weixin_46589442的博客
07-15
4749
刷新页面，资源请求失败，发送网络请求/MyHome/message/details/1/message001失败，因为服务器上没有这个请求（history模式存在这个问题，hash模式则无）
关于vue-router的历史模式和hash模式
热门推荐
Army-海军的博客
04-07
1万+
首先了解下 window.location对象
打开浏览器在控制台打印
路由在未交由前端管理之前都是后台控制
你请求不同的路径，后台就甩回不同的html页面回来作为回应。你请求a我就给你a,你请求不存在我就给你个404页面
vue-router就是只改变视图，不请求页面。你看到的是假象。实际上请求的都是index.html。
1、Hash模式：
hash（#）是URL...
vue-router使用history的配置问题
qq_34893429的博客
06-10
7396
vue使用history后，能够使得url更加漂亮，也就是不再有‘#’的问题，但同时我们会发现，如果页面直接访问，比如http://www.xxx.com/user/info的时候，显示无法get，并且刷新的时候，也会出现同样的问题。
vue-router官方资料说需要服务器端配置支持，在node中也就是需要一个connect-history-api-fallback的中间件。
而后
vue路由的两种模式--hash和history
一个憨憨的前端之路
08-24
2934
  大家都知道在vueRouter中，我们可以通过mode来改变路由模式，可选为hash和history。
hash
  hash指的是location里面#以及它后面的部分。也被成为锚点，通常用来定位，它的改变不会造成页面的刷新。
  我们可以通过window.location.hash来获取当前的hash值。
** 拓展：url各部分获取 **
hash设置或返回从井号 (#) 开始的 URL（锚）。
host设置或返回主机名和当前 URL 的端口号。
hostname设置或返回当前 URL 的主
vue路由的两种模式：hash与history的区别
qq_26780317的博客
06-11
6893
前言：众所周知，vue-router有两种模式，hash模式和history模式，下面来看看两者的区别。
一、基本情况
直观区别：hash模式url带#号，history模式不带#号。
1.hash模式
hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也被称为锚点，本身是用来做页面定位的，它可以是对应的id元素显示在可视区域内。
由于hash值变化不会导致游览器向服务器发出请求，而且hash改变会...
vue-router 由hash向history模式变迁
SunShinessx的博客
01-30
354
一、概念阐述
对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
为了达到这一目的，浏览器当前提供了以下两种支持：
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：[http://...
hash和history两种模式的区别
————————————————————————————————
09-03
2513
前端路由 vue-router 有两种模式 ,hash模式和history区别
一、hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些
二、原理的区别（原理）
三、hash 能兼容到IE8， history 只能兼容到 IE10
四、由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在H.
VueRouter — vue路由hash模式和history模式
小绵杨
03-23
6016
目录一、前言二、hash模式三、history模式
一、前言
对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。
vue脚手架搭建的项目的路由默认是hash模式。
hash模式：
创建路由实例时，添加mode:"history"属性，即可使用history模式。
const router = new VueRouter({
routes,
mode: "history"
})
history模式：
二、hash模式
最开始学习超链接a时，就可以利用锚点”#”实现跳转
Vue router 模式 hash 和 history
weixin_42754922的博客
03-27
2236
目录
hash 模式
Vue-router hash
history 模式
Vue-router传参
在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。
为...
history和hash的区别
qq_43278421的博客
09-30
8960
1.hash带#，history没有
2.history相对比较新，只能兼容ie10，hash能兼容ie8
3.跳转的时候hash只能修改#后面的内容，而history只要是同源的就可以
原理：
hash：通过监听浏览器的onhashchange（）事件变化，查找对应的路由规则
history：利用H5的history中新增的两个API pushState（）和replaceState（）和一个事件onpopstate监听URL变化
pushState（）和replaceState（）可以用于浏览器的历史记
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
番茄啊土豆
CSDN认证博客专家
CSDN认证企业博客
码龄12年
暂无认证
38
原创
11万+
周排名
151万+
总排名
15万+
访问
等级
1574
积分
10
粉丝
43
获赞
评论
122
收藏
私信
关注
热门文章
vue中el解析
32354
Linux下重启oracle数据库
18448
kettle 数据同时插入删除问题
15295
踩坑：VScode 集成 eslint 插件
12154
一款很好用的Jquery 打印插件——jQuery.print.js
10173
最新评论
div 自动上下滚动特效
m0_48293620:
你好，请问div里的内容是ajax获取的是不是会影响div自动上下滚动的效果啊
include-filter和exclude-filter
仲永要加油呀:
好家伙，终于遇到一个能说明白的了，不过博主当时怎么不把测试代码顺便也贴上来一下啊
解决 Failed while installing Dynamic Web Module 3.0
lide5433
回复
wxian123: 你等等嘛 右下角还没加载完
解决 Failed while installing Dynamic Web Module 3.0
番茄啊土豆
回复
wxian123:
你可能是没有安装成功，再安装试试
解决 Failed while installing Dynamic Web Module 3.0
wxian123:
博主你好，我就是这样添加插件完了以后创建的web项目，它才提醒我出现failed while installing Dynamic Web Module的错误的，请问博主知道怎么解决吗？
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
div 自动上下滚动特效
关于登录认证的一些思考：token、session、cookie
HTTPS 证书验证
2019年6篇
2018年32篇
2017年4篇
2016年3篇
目录
目录
最新文章
div 自动上下滚动特效
关于登录认证的一些思考：token、session、cookie
HTTPS 证书验证
2019年6篇
2018年32篇
2017年4篇
2016年3篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
番茄啊土豆
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值