vueRouter history模式和hash模式的区别

很长一段时间没有写博客了，换了个工作，就搁置了一段时间了，从今天开始，博客依旧会慢慢跟新，请大家多多支持。

前言

今天我们来谈谈vue 的路由vueRouter。我将会分2篇文章来带大家彻底理透vueRouter的原理。但要理解vueRouter，我们首先得了解vueRouter的两种模式
故，今天，我们先说说vueRouter的两种模式

history模式
hash模式

初步了解

我们大家都知道spa单页应用和传统前端之间一个很大区别就是spa单页应用可以在浏览器url地址发生变化时不向服务器发送请求的情况下更新我们的页面。

传统应用改变页面视图的方式：
- 传统前端应用改变页面视图的方式是通过从一个html跳转到领一个html实现的。当浏览去中url发生变化时，浏览器会根据url地址，向服务器去请求对应的html文件，然后浏览器再渲染拿到的html文件，从而更新页面。故这种方式，页面会闪一下
路由改变页面视图的方式
- 路由改变视图，主要靠的是vue 或者 react不刷新更新视图的原理。它会在浏览器url发生变化时，不再向服务端发送请求，而是通过一定的方式，找到所需要渲染的页面或组件，然后渲染这个页面或这个组件即可。从而实现这种效果的方式，主要有两种，history模式和hash模式（只针对vue）（这里插一句，不管哪种方式，底层最终实现页面无刷新更新视图的方式都是通过虚拟dom来实现的）

两种方式的对比

1、hash方式

hash方式是指url中存在 # 的一种方式，是vueRouter的默认模式，
当#后面的url地址发生变化时，浏览器不会向服务器发送请求，故不会刷新页面
当#后面的url地址发生变化时，会触发hashChange（hash模式得核心实现原理）事件，从而，我们可以通过监听hashChange事件来知道路由发生变化，从而进一步去更新我们的页面
只可修改hash部分，
当浏览器刷新时，浏览器只会向服务器去请求# 前面的域名服务器下根目录下的index.html文件
hash模式会创建hashHistory对象,hashHistory对象有两个方法，push() 和 replace()
HashHistory.push()会将新的路由添加到浏览器访问的历史的栈顶,而HasHistory.replace()会替换到当前栈顶的路由

2、history模式

history模式得路由和域名之间直接通过/连接，无#符分隔，就是普通url形式
history模式当发生路由跳转时，通过HTML5的history.pushState()方法或者history.replaceState() 方法改变地址栏地址，并将地址的改变记录到浏览器访问栈中。（这里有一点需要注意，它只改变了浏览器地址栏中的地址，但并不会像服务器去发送请求）
当浏览器前进，后台，或者调用back(),forward(), go()等方法时，会触发popstate事件。故，我们可以通过监听popstate事件来获取最新的路由地址，从而更新页面
通过pushstate() 修改的url可以是与当前url同源的任意url。
需要和服务器配合使用，否则容易出现页面404的情况

渲染过程对比

下面，我们来说说hash模式下和history下分别是如何一步步控制页面变化的。

在讲述过程之前，我们需要先来明白一个问题。不管是react，还是vue, 我们最终项目打包出来，大多只有一个index.html文件(除非是多入口打包)。故，web服务器上通常只会放一个index.html，其他都是js，css以及静态文件等

hash模式渲染过程

首先，当我们首次去访问一个hash模式的地址时，(假设访问地址为 www.xxx.com/#/about/dog) 那么，浏览器只会向地址为 www.xxx.com的web服务器的根目录下去请求index.html 文件。
解析index.html，发现有script标签引了对应的js文件，从而继续请求js文件
解析js文件，此时，在onload事件中，去根据当前路由地址，去路由映射表中查找对应的组件，然后router-view再渲染对应的组件，从而首次渲染出对应页面
当我们通过router-link去改变了路由地址时，首先会禁用a标签的href路径跳转，然后通过location.hash或者location.href去改变url中的地址为 #/xxx。
当url中地址一旦发生改变，会触发hashchange事件，在此事件中，去改变vue中一个用于存放当前url路由地址的变量的值如：this.data.current = ‘/xxx’ ps：data是一个响应式数据，当current发生变化时，vue会监测到变化，从而所有依赖了current的地方都会进行更新
current记录的url地址发生变化后，router-view内部是通过current的值，然后去路由映射表中查找对应的component，从而渲染对应的component。故router-view 是current的一个依赖着，故当current发生变化时，router-view会找到最新的url对应的component组件，从而渲染最新的组件。从而导致页面更新

history模式

history模式，当浏览器首次访问某个地址时，或者以某个地址进行刷新浏览器时，浏览器会直接以当前地址去服务器中查找对应文件。如：当前url地址为 www.xxx.com/about/dog 时，如果刷新浏览器，那么浏览器会去 www.xxx.com这个web服务器的根目录下的about文件夹下的dog文件夹下去寻找index.html文件。但实际我们的index.html文件是存放在www.xxx.com这个服务器的根目录下的。所以此时，会找不到文件，浏览器就会报404的错误。这也是为什么history模式下时，需要和web服务器配合使用，需要web服务器在config文件下配置当找不到文件时，默认返回根目录下的index.html文件
浏览器拿到index.html文件后，解析html文件，发现scrpit引了js，请求js文件，解析js文件，在onload时，获取当前路由地址，去路由映射表中查找匹配的component组件，从而渲染对应组件
当通过router-link去改变了路由地址时，会调用history.pushState()方法去改变浏览器中的url地址，同时让this.data.current = 新的路由地址
current的值一旦发生变化，会触发router-view去重新渲染当前路由地址对应的路由组件
history模式下，当点击浏览器的前进，后退按钮时，只会去改变浏览器url中的路由地址，但是不会向服务器发送请求，同时，也不会去重新渲染页面
但是，浏览器点击前进，后退，会触发popstate事件，故，我们可以在popstate事件中，把当前最新的路由地址赋值给this.data.current ，current一旦发生变化，就会触发router-view组件重新渲染最新的路由组件（hash模式下，前进，后退一旦改变浏览器中的路由地址，就会自动触发hashchange事件，从而触发router-view的重新渲染）

好了，路由模式就介绍到这里了，有疑问欢迎私信或者下方评论。
后面，我会继续出一个vueRouter内部基础实现原理的文章。，感兴趣的可以看看

vueRouter history模式和hash模式的区别相关推荐

关于vue-router的历史模式和hash模式
首先了解下 window.location对象打开浏览器在控制台打印路由在未交由前端管理之前都是后台控制你请求不同的路径,后台就甩回不同的html页面回来作为回应.你请求a我就给你a,你请求不存 ...
【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
vue-router区分hash模式和history模式
总结: hash模式是我们在url后面添加一个#xx触发事件.尽管浏览器没有请求服务器,但是页面状态和url已经关联起来了,这就是所谓的前端路由,单页应用的标配. history模式下浏览器地址不规整 ...
vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
VueRouter — vue路由hash模式和history模式
目录一.前言二.hash模式三.history模式一.前言对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认 ...
Vue-router 中hash模式和history模式的区别
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:&q ...
history模式监听_面试题：VueRouter中的 hash 模式和 history 模式有什么区别
面试题:VueRouter中的 hash 模式和 history 模式有什么区别 hash模式 hash 模式的路由中带有 # 号 hash 模式通过 window.onhashchange 方法监听 ...
Use history mode for router? Vue-router 中hash模式和history模式的区别
再通过vue-cli创建项目的时候,会出现 Use history mode for router? 也就是再问你:是不是用history模式来创建路由 hash模式和history模式的不同最直观 ...