前端路由 vue-router ？_history 每次都会服务器-优快云博客

本文详细介绍了前端路由的概念、Vue Router的工作方式及主要组成部分。Vue Router作为Vue.js官方的SPA路由管理器，提供Hash和History两种模式。Hash模式利用URL的#实现路由，适合不支持HTML5 History API的浏览器；History模式则依赖于HTML5 History接口，提供更美观的URL，但需要服务器配置以避免刷新时的404问题。

2）VueRouter的三个主要组成部分：

SPA：指一个web网站只有唯一一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。

前端路由：

Hash地址与组件之间的对应关系。

前端路由的工作方式：

用户点击页面上的路由链接
导致URL地址栏中的Hash值发生变化
前端路由监听到Hash地址的变化
前端路由把当前Hash地址对应的组件渲染到浏览器中

vue-router

vue-router是vue官方给出的前端路由解决方案。它只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。

对于VueRouter而言，路由就是根据一个请求路径选中一个组件进行渲染的决策过程。

路由

1）相关概念：

router：路由器
routes：路由表
route：路由

2）VueRouter的三个主要组成部分：

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

router-link：请求链接的接口，浏览器会解析成<a>

router-view：路由出口，用来渲染路由路径对应的组件

路由过程：router-link---->VueRouter---->router-view

Vue-router的作用

路由就是SPA（单页面应用的路径管理器），适用于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和内容映射起来。传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则表现为路径之间的切换，也就是组件的切换。路由模块的本质是建立起 url 和页面之间的映射关系。

SPA（single page application）：单页面应用程序，只有一个完整的页面，在加载页面时，不会加载整个页面，只是更新某个指定容器中的内容。SPA核心之一是：更新视图而不重新请求页面；

vue-router的两种工作模式

vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式（根据mode参数来决定使用哪一种模式）

1、Hash模式

最开始学习超链接a时，就可以利用锚点”#”实现跳转到同一页面的不同id所对应的位置。我们知道vue是单页面应用，所以很符合使用锚点实现路由。

vue-router 默认使用 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

hash （#）是 URL 的锚点，代表的是网页中的一个位置，仅仅改变 # 后部分，浏览器只会滚动到相应位置，不会重新加载网页。

也即 # 是用来指导浏览器动作的，对服务器端完全无用。也就是说 hash 值的变化不会让浏览器向服务器请求。

Hash 模式通过锚点值的改变，根据不同的值，渲染DOM中不同的组件

打开vue官网，点击 “vuejs是什么目录”：
可以看到地址栏，是带#的，所以是hash模式：

路由的哈希模式其实是利用了window.onhashchange事件，也就是哈希值（#后面的值）如果有变化，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，这样能够找到对应页面进行加载。

2、 History模式

使用hash模式完全可以实现路由的功能，但是，地址栏带"#号"，让人感觉不太正常。而且有的时候分享页面到某些app时，有的app里面url是不允许带有#号的。所以需要使用history模式，去掉“#号”。只需要在配置路由规则时，加入 mode:'history'，这种模式充分 history.pushState API 来完成 URL 跳转而无需重新加载页面。

对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。
vue脚手架搭建的项目的路由默认是hash模式。
hash模式：

前面知道了hash模式是观察window.location.hash的变化来改变路由的。

而HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面。

每个window窗口都有持有自己的history，为了安全起见history不会暴露访问过的URL，但是可以通过API进行前进或后退访问URL的内容

1、 window.history.pushState(data, title, targetURL);
@状态对象：传给目标路由的信息,可为空
@页面标题：目前所有浏览器都不支持,填空字符串即可
@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
2、window.history.replaceState(data, title, targetURL);
@类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录。
3、popstate事件，回退，与pushState作用相反。

通俗地说就是浏览器的地址栏url信息存储在了window.history.state中，但是调试时我们发现，其为null，是为了防止网页获取你的历史浏览地址，所以给隐藏了，但是其内部可以获取。

举一个例子，立马就明白了：
打开百度，搜索“优快云”:

然后我们打开控制台，输入：

window.history.replaceState(null, 'title', 'https://www.baidu.com/')

效果：在这里插入图片描述

地址栏变成了百度首页的地址，但是并不影响当前页面的内容。这也就是history模式下vue单页面实现不同路由显示的原理，程序中路由改变时，将路由地址显示在地址栏，然后根据路由对应的地址显示组件就行了，此时并没有重新请求服务器，但是地址栏确改变了，给用户造成了页面跳转的假象。然而，我们知道，vue项目中，我们一直都在index.html中。

但是，同时也暴露了history一个问题，就如上面的例子，如果我将地址栏替换为"https://www.baidu.com/"后，刷新页面，肯定会跳转到百度首页的，因为刷新会重新请求服务器的。然而实际应用中，vue中的路由地址并没有在服务器上有对应的后端处理，它仅仅用于前端的路由切换。

那么如何解决呢？这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html）。

所以相比于hash，history虽然可以实现正常美观的地址显示，但是代价就是需要解决刷新时请求服务器的404的问题。

history由于没有/#/,
如果地址栏直接访问的是http://127.0.0.1:5501/about页面会向服务器的目录下去找/about这个文件夹下的index.html 由于没找到，会变成404.