路由中的 hash模式 与 history 模式

目录

1. hash模式与history模式出现背景

2. hash 模式

        2.1 原理：

        2.2 hash 不足之处

3. history 模式

        3.1 原理

        3.2 history 的缺点

4. 两种模式的切换

---

1. hash模式与history模式出现背景

        由于 Vue 项目为单页面应用，所以整个项目的开发和构建过程，仅存在一个 HTML 物理文件。由于路由系统可以实现将项目的组件与访问的 URL 路径进行绑定。由于 Vue 项目只有一个物理文件，切换页面既需要让访问的 URL 路径发生变化，又不能触发 HTML 物理文件的重新加载，这就使得 VueRouter 的跳页模式不能使用普通的超链接方式

        VueRouter 为例支持页面应用的页面管理和页面调跳转，提供的两种页面的跳转和加载模式：分别是 hash模式 与 history模式

2. hash 模式

        2.1 原理：

                1. hash 模式使用的锚点技术重写 URL 访问地址，会在原有的 URL 路径上拼接 /#/xxx，这种方式可以在不重新加载原有的 HTML 文件的基础上，实现切换 URL 路径的目的

                2. hash 模式利用了纯静态技术，解决了单页面应用的页面划分，它可以在不触发网页重新加载的情况下切换 URL 路径，配合 onhashchange() 函数实现，一旦 URL 中的 hash 部分发生变化，就会触发函数通知，通过 JavaScript 编程可以实现 DOM 对象的切换展示。

        2.2 hash 不足之处

                1. 在分布式微前端的项目中，嵌套的子应用和主应用都是用 hash模式时，由于 hash 模式的 URL 路径只能存在一个 # ，会导致应用和主应用在定义 URL 路径上存在困难。

                2. hash 模式的 URL 路径中包含#，也会在视觉上导致 URL 路径不美观

3. history 模式

        3.1 原理

                1. history 模式是 VueRouter 中的常用的一种路由模式，它与 hash 模式不同，不需要借助锚点技术重写 URL 路径，所以 history 模式使用的 URL 路径不存在#

                2. history 模式采用 history 对象的 pushState() 函数重写 URL 路径，可以在不发生重新加载的情况下变更 URL 路径

        3.2 history 的缺点

                history 模式重写 URL 路径的解决方案与 hash 模式现象类似单本质不同，虽然 history 模式可以重写 URL 路径，但重写后的新路径不包含原有的HTML物理文件的访问地址，所以history重写URL 路径后，一旦刷新网页就会造成 404 无法访问的效果。VueCLI 开发环境中解决了 history 模式的刷新问题，不过项目发布到生产环境中，由于 history 模式的 URL 路径问题，还需要配合生产服务器的转发规则重写，用以支持 history 模式路由的加 载

4. 两种模式的切换

       在 VueCLI 项目中，可以通过 mode 属性来切换路由的 history 模式和 hash 模式