前端vue入门(纯代码)36_history和hash模式

永远不要停止学习的步伐

34.Vue Router--路由的两种工作模式

单页应用SPA的目标是不刷新浏览器,通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标,可以通过前端路由的2种工作模式实现:hash模式和history模式。

1、hash模式

① 特点
对于一个URL来说,hash 就是指 url 路径后的 # 号以及后面的字符。

在这里插入图片描述

② 注意点
hash值变化不会引起浏览器向服务器发出请求,尽管浏览器没有请求服务器,但是页面状态和url是关联起来。

③ 用法(默认是hash)
mode: 'hash'

2、history模式

① 特点
URL路径中没有 #

在这里插入图片描述

② 注意点
history 模式改变 url 会导致浏览器向服务器发送请求,刷新页面时,如果服务器没有对应的资源或者响应,页面会出现404
③ 用法
mode: 'history'

3、两种工作模式的区别
hash模式 history模式
地址中永远带有 # 符,不美观 美化后的hash模式,会去掉路径中的 “#”
基于URL传参,如果要传递复杂的数据,会有体积的限制 不仅可以在URL里放参数,还可以将数据存放在一个特定的对象中
当 URL 改变时,页面不会重新加载,不会刷新 不怕前进后退跳转,就怕刷新(如果后端没有准备的话),因为刷新是实实在在地去请求服务器了。【消耗的时间很多还很慢】
地址通过第三方app分享,若app校验严格,则地址会被标记为不合法 abstract 路由模式部署上线时需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致404错误
兼容IE8以上 容IE10以上

两种工作模式的原理

1、hash模式原理
  • hash模式的实现原理是通过监听hashChange事件来实现的
  • hash值改变会触发hash Change事件,hashChange事件获取当前的hash值调用对应的路由,从而修改页面内容。
  • hash值发生变化的URL会被浏览器记录下来,因此浏览器的进后退也能对其进行控制

在window对象上监听hashChange事件

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>hash模式工作原理title>
    <h2>hash模式工作原理演示h2>
head>

<body>
    <button id="btn">点我修改hash值button>
    <script>
        let btn = document.querySelector("#btn")
        btn.addEventListener("click", () => {
            location.href = "#/user"
        })
        // hash值一旦修改就会触发
        window.onhashchange = (event) => {
        	 console.log(event.oldURL,event.newURL);
            console.log(location.hash);
        }
    script>
body>

html>

运行结果

前端vue入门(纯代码)36_history和hash模式_第1张图片

2、history模式原理
  • history模式的实现原理是通过监听popstate事件来实现的
  • popstate事件只能监听history.go、forward、back这样的路由跳转方式;
  • popstate事件监听不到replace和push这两种路由跳转方式,可以通过调用 history.pushState和replaceState方法并且监听popstate事件来实现的

在window对象上监听popstate事件

window.onpopstate = (event)=> {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
//pushState() ,replaceState()需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL
history.pushState({page: 1}, "title 1", "?id=001");   
history.replaceState({page: 3}, "title 3", "?id=002"); 
history.back(); 
history.forword(); 
history.go(2);  
总结:
  1. 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
  3. hash模式:
    1. 地址中永远带着#号,不美观 。
    2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式:
    1. 地址干净,美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。

————————————————
版权声明:本文为CSDN博主「离奇6厘米」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Vest_er/article/details/127132819

后续等vue2所有基础知识学完后,整个学习笔记的代码会上传到github

你可能感兴趣的:(Vue前端,前端,vue.js,哈希算法)