Vue学习第34天——路由的2种工作模式:hash和history的区别

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

一、路由的两种工作模式

1、hash模式

① 特点
对于一个URL来说,hash 就是指 url 路径后的 # 号以及后面的字符。
在这里插入图片描述
② 注意点
hash值变化不会引起浏览器向服务器发出请求,尽管浏览器没有请求服务器,但是页面状态和url是关联起来。

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

2、history模式

① 特点
URL路径中没有 #
在这里插入图片描述
② 注意点
history 模式改变 url 会导致浏览器向服务器发送请求,刷新页面时,如果服务器没有对应的资源或者响应,页面会出现404
③ 用法
mode: 'history'

二、两种工作模式的区别

hash模式 history模式
地址中永远带有 # 符,不美观 地址更美观
基于URL传参,如果要传递复杂的数据,会有体积的限制 不仅可以在URL里放参数,还可以将数据存放在一个特定的对象中
地址通过第三方app分享,若app校验严格,则地址会被标记为不合法 部署上线时需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致404错误
兼容IE8以上 容IE10以上

三、两种工作模式的原理

1、hash模式原理

hash模式的实现原理是通过监听hashChange事件来实现的

hash值改变会触发hashChange事件,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>Documenttitle>
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学习第34天——路由的2种工作模式:hash和history的区别_第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);  

你可能感兴趣的:(vue,学习,哈希算法,vue)