哈希模式和历史模式在Vue-router中有什么区别

本篇文章给大家分享的是有关哈希模式和历史模式在Vue-router中有什么区别,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

Vue-router中哈希模式和历史模式的关系

在vue的路由配置中有模式选项最直观的区别就是在url中哈希带了一个很丑的#而历史是没有#的

模式:“hash",,,
模式:“history",,

<强>哈希模式和历史模式的不同

对于vue这类渐进式前端开发框架,为了构建温泉(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义。前端路由的核心,就在于,改变视图的同时不会向后端发出请求。

<强>为了达到这一目的,浏览器当前提供了以下两种支持:

<李>

散列,即地址栏URL中的#符号(此哈希不是密码学里的散列运算)。比如这个URL: http://www.abc.com//你好,散列的值为#/你好。它的特点在于:哈希虽然出现在URL中,但不会被包括在HTTP请求中,对后端完全没有影响,因此改变散列不会重新加载页面。

<李>

历史——利用了HTML5历史界面中新增的pushState()和replaceState()方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有回的,向前,去的基础之上,它们提供了对历史记录进行修改的功能,只是当它们执行修改时,虽然改变了当前的URL,但浏览器不会立即向后端发送请求。

<李>

因此可以说,哈希模式和历史模式都属于浏览器自身的特性,Vue-Router只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

<强>使用场景

一般场景下,散列和历史都可以,除非你更在意颜值,#符号夹杂在网址里看起来确实有些不太美丽。

如果不想要很丑的哈希,我们可以用路由历史的模式,这种模式充分利用历史。pushState API来完成URL跳转而无须重新加载页面。

另外,根据Mozilla开发网络的介绍,调用history.pushState()相比于直接修改散列,存在以下优势:

<李>

pushState()设置的新URL可以是与当前URL同源的任意URL;而散列只可修改#后面的部分,因此只能设置与当前URL同文档的URL;

<李>

pushState()设置的新URL可以与当URL前一模一样,这样也会把记录添加到栈中;而散列设置的新值必须与原来不一样才会触发动作将记录添加到栈中,

<李>

pushState()通过stateObject参数可以添加任意类型的数据到记录中;而散列只可添加短字符串;

<李>

pushState()可额外设置标题属性供后续使用。

当然啦,历史也不是样样都好.SPA虽然在浏览器里游刃有余,但真要通过URL向后端发起HTTP请求时,两者的差异就来了。尤其在用户手动输入URL后回车,或者刷新(重启)浏览器的时候。

个人在接入微信的一个活动开发过程中开始使用的哈希模式,但是后面后端无法获取到我#后面的URL参数,于是就把参数写在#前面,但是讨论后还是决定去掉这个巨丑的#

于是乎改用历史模式,但是开始跑流程的时候是没问题,但是后来发现跳转后刷新或者回跳,会报一个404的错误,找不到指定的路由,最后后端去指向正确的路由加了/hd/xxx去匹配是否有这个/hd/}{:路径才得以解决

<强>总结

1哈希模式下,仅散列符号之前的内容会被包含在请求中,如http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。

2历史模式下,前端URL的必须和实际向后端发起请求的URL一致,如http://www.abc.com/book/id。如果后端缺少对/book/id的路由处理,将返回404错误.Vue-Router官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源,则应该返回同一个索引。html页面,这个页面就是你应用依赖的页面。”

3结合自身例子,对于一般Vue + Vue-Router + Webpack + XXX的形式的网络开发场景,用历史模式即可,只需在后端(Apache或Nginx)进行简单的路由配置,同时搭配前端路由的404页面支持。

以上就是散列模式和历史模式在Vue-Router中有什么区别,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

哈希模式和历史模式在Vue-router中有什么区别