Vue-router原理浅析，两种模式如何实现？

本文共计2317个文字，预计阅读时间需要10分钟。

之前用Vue开发单页面应用，发现不管怎么变，浏览器地址栏总是会有一个固定的'/'。

之前用Vue开发单页应用，发现不管路由怎么变化，浏览器地址栏总是会有一个'#'号。

当时检查自己的代码，没有发现请求的地址带'#'，当时也很纳闷，但是由于没有影响页面的渲染以及向后台发送请求，当时也没有在意。最近看了一下vue-router的实现原理，才逐渐揭开了这个谜题。

vue-router 的两种方式（浏览器环境下）

1. Hash （对应HashHistory）

hash（“#”）符号的本来作用是加在URL中指示网页中的位置：

www.example.com/index.html#print

#符号本身以及它后面的字符称之为hash(也就是我之前为什么地址栏都会有一个‘#')，可通过window.location.hash属性读取。它具有如下特点：

hash虽然出现在URL中，但不会被包括在HTTP请求中。