南宁公司网站建设公司,产品目录网站模板,金山集团网站建设,wordpress编辑器还原路由
基本概念
在前端技术早期#xff0c;所有页面的跳转通过更改url,浏览器页面刷新获取新的页面内容#xff0c;这种粗糙的交互方式#xff0c;一直等待优化。 后来#xff0c;改变发生了——Ajax 出现了#xff0c;它允许人们在不刷新页面的情况下发起请求#xff0…路由
基本概念
在前端技术早期所有页面的跳转通过更改url,浏览器页面刷新获取新的页面内容这种粗糙的交互方式一直等待优化。 后来改变发生了——Ajax 出现了它允许人们在不刷新页面的情况下发起请求实现内容的更新。伴随的还有“不刷新页面即可更新页面内容”这种需求。在这样的背景下出现了 SPA单页面应用。最初的spa 应用只有一个URL地址大家在使用的过程中就发现了两个问题1.无法定位当前页面的位置不知道前后都是那些页面。2.对SEO非常不友好。 为了解决这两个问题就诞生了前端路由。
vue路由的基本原理
其实vue原理体现在vue路由配置项中的“history”。 类型: string 默认值:“hash” (浏览器环境) | “abstract” (Node.js 环境) 可选值: “hash” | “history” | “abstract”
hash
hash模式地址上有“#”哈希字符是hash模式只要是带有“#”的都是前端路由。 hash模式的工作原理是hashchange事件可以在window监听hash的变化。类似http://www.xxx.com/#/homeurl的hash是 (#) 及后面的那部分。常用作锚点在页面内进行导航改变 URL 中的 hash 部分不会引起页面刷新。
history
history模式例如http://yoursite.com/user/id这种很顺滑的 history模式的工作原理是HTML5 规范中提供了 history.pushState 和history.replaceState 来进行路由控制。通过window监听popstate使用pushState、replaceState可以实现改变 url ,向服务器发送请求,但是不会引起页面刷新。
abstract
abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。基于内存的历史。该历史的主要目的是为了处理服务端渲染。它从一个不存在的特殊位置开始。用户可以通过调用 router.push 或 router.replace 将该位置替换成起始位置。
history hash的区别
hash模式和history模式的区别主要体现在原理、表现、兼容性、以及与后端交互等方面。以下是详细介绍
原理不同
hash模式通过监听浏览器窗口的onhashchange事件来响应URL中#符号后的变化而History模式利用浏览器提供的pushState和replaceState方法并通过监听popstate事件来模拟历史记录的改变从而实现路由的更新。
表现不同
在hash模式下URL中会包含#符号以及后面的字符这在地址栏中会显示为带有#的URL而在history模式下URL中不包含#符号因此地址栏中不会显示#符号。 兼容性不同。Hash模式向下兼容可以兼容到IE8而history模式则需要浏览器支持HTML5至少需要IE10。 与后端交互不同。hash模式中URL的变化不会导致浏览器向服务器发送请求因此对后端没有影响改变Hash值不会重新加载页面而history模式中URL的变化会触发向服务器发送请求的行为如果后端没有正确处理可能会导致404错误。
总结
具体选择哪种模式取决于项目的具体需求例如如果项目需要良好的SEO支持或者需要与后端进行紧密的交互那么History模式可能更适合如果项目主要关注用户体验且对后端没有特殊要求那么Hash模式可能是一个更好的选择。
