vue router中hash模式和history模式的区别
面试问答
hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实。
小白回答: hash 模式 url 带 # 号,history 模式不带 # 号。
大牛解答: hash 模式 url 里面永远带着 # 号,我们在开发当中默认使用这个模式。那么什么时候要用 history 模式呢?如果用户考虑 url 的规范那么就需要使用 history 模式,因为 history 模式没有#号,是个正常的 url 适合推广宣传。当然其功能也有区别,比如我们在开发 app 的时候有分享页面,那么这个分享出去的页面就是用 vue 或是 react 做的,咱们把这个页面分享到第三方的 app 里,有的 app 里面 url 是不允许带有 # 号的,所以要将#号去除那么就要使用 history 模式,但是使用 history 模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下 apache 或是 nginx 的 url 重定向,重定向到你的首页路由上就OK啦。
模式
Vue 为了构建 SPA, 需要引入前端路由系统 Vue-Router。前端路由的核心,就在于 —— 改变视图的同时不会向后端发送请求。为了达到这一目的,浏览器当前提供了以下两种支持:
1. hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)
比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面
2. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求
因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由
使用场景
一般场景下,hash 和 history 都可以,如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成,URL 跳转而无须重新加载页面。
另外,根据 Mozilla Develop Network 的介绍,调用 history.pushState() 相比于直接修改 hash,存在以下优势:
1. pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL
2. pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中
3. pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串
4. pushState() 可额外设置 title 属性供后续使用
History模式下的问题
但是当用户手动输入 URL 后回车,或者刷新(重启)浏览器的时候,会出现以下问题:
1. hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误
2. history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”
小结
结合自身例子,对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景,用 history 模式即可,只需在后端(Apache 或 Nginx)进行简单的路由配置,同时搭配前端路由的 404 页面支持。
vue router中hash模式和history模式的区别相关推荐
- Use history mode for router? Vue-router 中hash模式和history模式的区别
再通过vue-cli创建项目的时候,会出现 Use history mode for router? 也就是再问你:是不是用history模式来创建路由 hash模式和history模式的不同 最直观 ...
- Vue平凡之路 (一):Vue-router 中hash模式和history模式
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:&qu ...
- 【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别 咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- VueRouter — vue路由hash模式和history模式
目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认 ...
- Vue-router 中hash模式和history模式的区别
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:&q ...
- history模式监听_面试题:VueRouter中的 hash 模式和 history 模式有什么区别
面试题:VueRouter中的 hash 模式和 history 模式有什么区别 hash模式 hash 模式的路由中带有 # 号 hash 模式通过 window.onhashchange 方法监听 ...
- vue-router区分hash模式和history模式
总结: hash模式是我们在url后面添加一个#xx触发事件.尽管浏览器没有请求服务器,但是页面状态和url已经关联起来了,这就是所谓的前端路由,单页应用的标配. history模式下浏览器地址不规整 ...
- 单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录 单页面应用(SPA) 前端路由的由来 前端路由 hash 模式 history 模式 hash.history优缺点 单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
最新文章
- 硅谷产品实战-总结:19、增长黑客的核心公式
- 160个Crackme045
- Ado.net 创建DataTable
- XML文档处理(树的应用)
- [转]CMake 生成makefile 步骤
- 使用命令行 启动 各种服务(控制面板 开机启动项 注册表 等)
- GNU C 与 ANSI C(下)
- 数据治理的几个关键要素
- apue.h文件找不到的解决办法
- 鲸探APP处罚60余位转售数字藏品用户 | 产业区块链发展周报
- 北大哲学系杨立华先生
- 跨境电子商务行业进入发展快车道
- 白嫖小程序云存储空间,手撸你的专属云盘
- 问题-fuxi job failed ,cased by:Invalid decimal format.
- golang学习笔记之string转换
- 【密码学】 一篇文章讲透数字证书
- 雷柏MT750w鼠标无线蓝牙连接教程
- ATM自动取款机程序设计
- 为什么普通树没有中序遍历和森林没有后序遍历
- Altium Designer绘制stm32最小系统PCB
热门文章
- 【BZOJ2716】【Violet 3】天使玩偶
- 敏捷 Scrum 框架核心 “3355”
- GetDlgItem的用法小结
- 学习WEB开发,从此我爱上了火狐的FireBug
- TOJ 3990.I guess the gift is a bag! II(质因数、欧拉函数好题)
- SpringCloud使用Hystrix的Turbine时,EurekaClient和NacosClient冲突问题
- 【HDU 2037】今年暑假不AC
- ffmpeg捕捉摄像头发送rtmp
- loadrunner web服务器和数据库是用虚拟机做的 能监控吗,基于LoadRunner的Web考试系统性能测试与优化.PDF...
- Python实例:网络爬虫抓取豆瓣3万本书(5)