1. SPA
SPA（Single-page Web applications）：单页面应用。指的是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。
通俗点讲就是在一个项目中，只有一个html页面，它在第一次加载页面时，将唯一完成的html页面和所有其余页面组件一起下载下来，所有的组件的展示与切换都在这唯一的页面中完成，当切换页面时，不会重新加载整个页面，而是通过路由来实现不同组件之间的切换，更新某个指定的容器中的内容。
SPA的优点：
- 更新视图而不会重新请求页面
- 最有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的钱后端分离，分工更明确
SPA的缺点：
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
2. Vue-Router
Vue-Router是Vue.js官方的路由插件。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在单页面应用中，页面跳转和切换就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。
路由器对象底层实现的三大步骤：
- 监视地址栏变化；
- 查找当前路径对应的页面组件；
- 将找到的页面组件替换到router-view的位置；
Vue-Router在实现单页面路由时，提供了两种方式：Hash模式和History模式，可以在创建router时选择不同的模式：
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(), // 这里指定具体的模式
routes, // `routes: routes` 的缩写
})
2.1 Hash模式
Vue-Router的Hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载；# 就是hash富豪，在hash符号后的值称为hash值；
首先我们需要了解下window.onhashchange：https://www.runoob.com/jsref/event-onhashchange.html。当改变hash值的时候，可以通过window.onhashchange监听到这个变化：
<body>
<button onclick="changeHash()">改变hash值</button>
<script>
function changeHash() {
window.location.hash = "account"
}
window.onhashchange = function () {
console.log(`监听到hash值修改：${window.location.href}`);
}
</script>
</body>
// 输出的值为：http://127.0.0.1:5500/javascript/254.history.html#account
Hash模式其实就是利用了window可以监听onhashchange事件来实现的。hash值是用来指导浏览器动作，对服务器没有影响，HTTP请求中不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，Hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。
Hash模式的特点：
- url中会带有一个#号
- 可以改变URL，但是不会触发页面的重新加载（hash的改变会记录在 window.hisotry 中）因此并不算是一次 HTTP 请求，所以这种模式不利于 SEO 优化
- 只能修改#后面的部分，因此只能跳转与当前URL同文档的URL
- 只能通过字符串改变URL
- 通过window.onhashchange监听hash的改变，借此实现无刷新跳转的功能
- 每改变一次hash（window.location.hash），都会在浏览器的访问历史中增加一个记录
- 路径从#开始，后面的所有路径都叫做路由的哈希值，并且哈希值它不会作为路径的一部分随着http请求，发给服务器
2.2 History模式
History模式是Vue-Router的另一种模式。它是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。
利用了HTML5 History Interface中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，他们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但是浏览器不会向后端发送请求。
2.2.1 history.pushState
2.2.1.1 简介
history.pushState是HTML5提供的一个新特性，它允许我们改变浏览器地址栏的url，并且不会像传统的URL跳转那样重新加载整个页面。
2.2.1.2 使用方法
history.pushState的使用方法非常简单。需要三个参数：state、title、url：
- state是一个js对象，可以存储一些与URL相关的数据
- title是一个字符串，通常被浏览器用于显示页面标题
- url是一个包含当前url的字符串
下面是一个代码示例：
history.pushState({page: "settings"}, "Settings", "/settings");
上面的代码将当前URL改成了/settings，同时还传入了一个名为page的数据对象，这个对象会被存储到浏览器的会话历史中，以便后续使用。需要注意的是，调用pushState并不会导致浏览器加载新的页面或刷新现有页面。
2.2.1.3 注意事项
- pushState调用不会触发页面加载事件及其它事件的处理函数
在调用history.pushState时，浏览器地址栏的URL会更新，但是浏览器并不会像传统的URL跳转那样重新加载整个页面。如果需要在页面的URL改变时执行一些特殊的操作，例如加载新的内容，需要绑定一个popstate事件处理函数：
window.addEventListener('popstate', function(e) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});
-
pushState调用无法阻止用户使用后退按钮
当用户点击浏览器的后退按钮时，浏览器会返回上一个历史记录条目，这会导致页面的URL发生改变。尽管调用pushState方法改变了URL，但无法阻止用户使用后退按钮。如果你希望阻止用户使用后退按钮，需要在popstate事件中执行特殊的操作。 -
pushState调用可能导致404错误
如果直接使用history.pushState更新URL，但是并没有相应的服务器端处理，那么在用户刷新页面或者直接访问该URL时会导致404错误。因此，需要在服务端进行相应的配置，让服务端能够正确处理这些URL请求，返回相应的内容。
使用history.pushState可以实现改变URL而不会发生页面刷新，这也是History模式实现的基础。
2.2.2 History模式的特点
- 路由跳转不需要重新加载页面
- 不带#，看起来比hash路由好看很多
- 兼容性没有hash好，可以看上面pushState的注意事项
2.2.3 问题及解决
2.2.3.1 生产环境
当我们把history项目部署到服务器后，此时我们在浏览器中输入一个网址（www.test.com），此时会经过DNS解析，拿到ip地址后根据ip地址向该服务器发起请求，服务器接收到请求之后，返回相应的数据（html css js）。如果我们在前端设置了重定向，跳转到 www.test.com/home，在前端会进行匹配对应的组件然后将其渲染到页面上。此时，如果我们刷新页面的话，浏览器会发送新的请求：www.test.com/home，如果后端服务器没有/home对应的接口，那么就会返回404.
生产环境刷新404的解决办法可以在nginx做代理转发，在nginx中配置按顺序检查参数中的资源是否存在，如果都没有找到，让nginx内部重定向到项目首页。
image.png
2.2.3.2 开发环境-historyApiFallback
那为什么开发环境时就不会出现404呢？因为在vue-cli 中 webpack 帮我们做了处理：
image.png
3. 总结
至此我们使用知道了 vue-roter 的两种路由模式，及差异化，简单来讲就是，hash 路由兼容性更好，但是带#显得丑些， histroy 和正常 url 路径一样，但是需要在服务器进行单独配置。大家可以根据自己的喜好去按需使用。
网友评论