vuerouter的hash与history 区别,vue-router中hash和history的区别

　　本文主要介绍深入了解Vue前端路由哈希和历史的区别。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。

前言

　　在你知道这两条路由之前，创建项目时难免会有vue或者react在路由之间选择，也难免会有hash和history的纠结，或者直接糊里糊涂的用默认的带#的hash路由。看完这篇分享，保证你以后不会迷茫于选择哪条路线，实现按需选择。有什么问题请在评论区指出来，我们一起交流。

简单介绍 Vue Router

　　ERouter是Vue.js的官方路由插件，与Vue.js深度融合，适合构建单页面应用。

　　vue的单页应用程序是基于路由和组件的。路由用于设置访问路径以及映射路径和组件。

　　传统的页面应用使用一些超链接来实现页面的切换和跳转。

　　在vue-router单页应用中，就是路径之间的切换，也就是组件的切换。

　　路由模块的本质是建立url和页面之间的映射关系。

　　至于为什么不能用A标签，那是因为所有用Vue做的应用都是单页应用，相当于只有一个主index.html页面，所以你写的标签是不行的，必须用vue-router来管理。

Vue Router 实现原理

　　在了解路由模式之前，我们首先要了解vue-roter的实现原理是什么，单页应用是什么，它的特点是什么，这样更容易加深我们对路由的理解。

　　SPA单页和应用模式：只有一个完整页面的单页应用；

　　当它第一次加载页面时，它会将唯一完整的html页面与所有其他页面组件一起下载，这样当它切换页面时，就不会加载整个页面，而只会更新指定容器中的内容。

　　单页面应用程序(SPA)的核心之一是在不重新请求页面的情况下更新视图。

　　实现底层路由器对象有三个步骤，即

　　(1)监视地址栏的变化；

　　(2)找到当前路径对应的页面组件；

　　(3)将找到的页面组件替换到router-vieW的位置。

　　Vue-router提供了两种实现单页面前端路由的方法：

　　哈希模式和历史模式；

　　Vue2根据模式参数决定采用哪种方法，而vue3是历史参数。我们将在下面了解关于这个属性的更多信息。

Hash

简述

　　vue-router默认的hash模式3354使用URL的hash来模拟一个完整的URL，所以当URL改变时，不会重新加载页面。Hash(#)是URL的锚点，代表网页中的一个位置。#后的部分更改时，浏览器只会滚动到相应的位置，不会重新加载网页。也就是说，#是用来指导浏览器的动作的，对服务器完全没用，HTTP请求也不会包含#。同时，每次更改#之后的部分，浏览器的访问历史都会增加一条记录。使用“后退”按钮。

　　#符号本身及其后面的字符称为hash，可以通过window.location.hash属性读取。

特点

　　虽然散列出现在URL中，但它不会包含在HTTP请求中。它是用来指导浏览器的动作的，对服务器完全没用。因此，更改哈希不会重新加载页面。

　　您可以为哈希的更改添加监听事件：

　　window . addevent listener( hashchange ，fncEvent，false)

　　每次更改hash(window.location.hash)时，都会有一条记录添加到浏览器的访问历史记录中。

　　带#号的Url。

设置

　　Vue3设置哈希模式路由

history

简述

　　历史是另一种路由模式。由于哈希模式会在url中取#，如果不想取#，我们可以使用路由的历史模式，在响应路由器配置规则时添加即可。默认情况下，vue的路由是哈希模式。

　　使用HTML5历史接口中新的pushState()和replaceState()方法。

　　这两种方法应用于浏览器的历史堆栈。基于现有的后退、前进和前进，它们提供了修改历史的功能。只是他们在进行修改的时候，虽然当前的URL发生了变化，但是浏览器并不会立即向后端发送请求。

设置

特点

　　路由跳转不需要重新加载页面。

　　No #在大多数人眼里比hash路由好太多了。

　　兼容性不如hash，下面会解释。

生产环境问题及解决

　　当我们将历史项目部署到服务器时，此时，我们在浏览器中输入一个URL(例如www.test.com[3])。这时候就会被dns解析。我们得到ip地址后，会根据ip地址向服务器发出请求。服务器收到请求后，会返回相应的结果(html、css、js)。

　　如果我们在前端设置重定向，页面会跳转到www.test.com/home[4]，相应的组件会在前端进行匹配，然后渲染到页面上。此时，如果我们刷新页面，浏览器会发送一个新的请求www.test.com/home[5]。如果后端服务器没有/home对应的接口，则返回404。

　　生产环境刷新404的解决方案可以通过nginx中的代理转发，配置为检查参数中的资源是否按顺序存在，如果没有找到，则在内部重定向nginx到项目的首页。

开发环境- historyApiFallback

　　有些朋友会有疑问，为什么开发环境没有遇到这个问题？不就是和生产一样的刷新操作吗？

　　我也有一个问题。查阅相关资料后，发现webpack帮助我们在vue-cli中进行了处理。

　　如果我们将配置更改为false，浏览器会将此视为get请求。如果后端没有对应的接口，会出现如下错误提示。

总结

　　到目前为止，我们知道了vue-roter的两种路由模式，以及它们的区别。简单来说，哈希路由兼容性好，但是用#看起来很丑。histroy与普通url路径相同，但需要在服务器中单独配置。可以根据自己的喜好来使用。

　　参考资料：https://www.jb51.net/article/250819.htm

　　这就是Vue前端路由的hash和history区别的细节。更多关于Vue前端路由的hash和history的区别，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。