Vue Router的路由模式

之前讲解和使用的 Vue Router 相关的方法和 API 都是基于哈希模式（HASH 模式）的，在创建 Vue Router 时，传递的 history 参数如下：

history: VueRouter.createWebHashHistory()

也就是说每次进行导航和路由切换时，在浏览器的 URL 上都可以看到对应的哈希变化，而哈希的特性是 URL 的改变不会导致浏览器刷新或者跳转，这正好可以满足单页应用的需求。如果不想使用 HASH 模式，也可以使用其他的路由模式，主要有以下几种：

HASH 模式：采用 createWebHashHistory() 创建，哈希是指在 URL 中 “#” 后面的部分，例如 http://localhost/index.html#/user，"/user" 这部分叫作哈希值，当该值变化时，不会导致浏览器向服务器发出请求，如果浏览器不发出请求，也就不会刷新页面。哈希值的变化可以采用浏览器原生提供的 hashchange 事件来监听。而 Vue Router 的 hash 模式就是不断地修改哈希值来监听和记录页面的路径。
HTML 5 模式：采用 createWebHistory() 创建，HTML 5 模式是基于 HTML 5 History Interface 中新增的 pushState() 和 replaceState() 两个 API 来实现的，通过这两个 API 可以改变浏览器 URL 地址且不会发送刷新浏览器的请求，不会产生 #hash 值，例如 http://localhost/index.html/user。
内存模式：采用 createMemoryHistory() 创建，该模式组要用于服务端渲染，在服务端是没有浏览器地址栏的概念的，所以将用户的历史记录都放在内存中。

HTML 5 模式和 HASH 模式都可以满足浏览器的前进和后退功能，HTML 5 模式相较于 HASH 模式可以让 URL 更加简洁，接近于真实的 URL，但是它的缺点是浏览器刷新之后，HTML 5 模式就失效了，转而立刻去请求真实的服务器的 URL 地址，而不会进入 Vue Router 逻辑中，对于纯前端来说，会丢失一些数据。所以，如果想要 HTML 5 模式刷新时也能进入 Vue Router，则需要对服务器进行配置，如果 URL 不匹配任何静态资源，则它应提供与用户的应用程序中的 index.html 相同的页面。如下是一个 NGINX 配置的例子：

location / {
    try_files $uri $uri/ /index.html;
}

HASH 模式和 HTML 5 模式都属于浏览器自身的特性，Vue Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。如需启用 HTML 5 模式，注意务必使用静态服务器的方式来访问，不能直接双击文件访问。路由模式可以通过配置参数来设置应用的基路径，如示例代码7-11-1所示。

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory('/base-directory/'), // HASH模式
    history: VueRouter.createWebHistory('/base-directory/'),// HTML5模式
    routes: [...]
})

当配置了根路径后，在浏览器地址栏中，所有的地址都会加上这个路径前缀。