[vue-router] hash模式与history模式的区别

栏目: 数据库 · 发布时间: 5年前

内容简介：使用而hash表示的是地址栏URL中#符号(也称作为锚点), hash虽然会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面.

使用 Vue + vue-router 创建单页应用十分简单, vue-router 提供的功能是将组件映射到路由, 然后渲染出来. 所以 vue-router 需要满足两个需求

记录当前页面的状态
可以使用浏览器的前进后退功能

而 vue-router 为了满足以上两个需求实现以下三个功能

改变URL且不让浏览器向服务器发出请求
检测URL的改变
截获URL地址, 并解析出需要的信息来匹配路由规则

hash模式的特点

hash表示的是地址栏URL中#符号(也称作为锚点), hash虽然会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面.

由于hash值变化不会引起浏览器向服务器发出请求, 而且hash改变会触发hashchange事件, 浏览器的进后退也能对其进行控制, 所以在HTML5之前, 基本都是使用hash来实现前端路由.

history模式的特点

利用了HTML5新增的 pushState() 和 replaceState() 两个api, 通过这两个api完成URL跳转不会重新加载页面

同时history模式解决了hash模式存在的问题. hash的传参是基于URL的, 如果要传递复杂的数据, 会有体积限制, 而history模式不仅可以在URL里传参, 也可以将数据存放到一个特定的对象中

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

超简单！一学就懂的互联网金融

视觉图文 / 人民邮电出版社 / 2015-2-1 / 45.00元

零基础、全图解，通过130多个精辟的知识点、220多张通俗易懂的逻辑图表，让您一书在手，即可彻底看懂、玩转互联网金融从菜鸟成为达人，从新手成为互联网金融高手！本书主要特色：最简洁的版式＋最直观的图解＋最实用的内容。本书细节特色：10章专题内容详解＋80多个特别提醒奉献＋130多个知识点讲解＋220多张图片全程图解，深度剖析互联网金融的精华之处，帮助读者在最短的时间内掌握互联网金融知......一起来看看《超简单！一学就懂的互联网金融》这本书的介绍吧!

码农工具