浅谈对vue-router的理解以及hash 模式和history模式

总结：早期做单页面是用原生js、jq利用hash（早期前端路由），后面h5新推出history的API，就可以用js利用history的API。vue-router把hash、history两种模式封装好了，帮我们快速构建单页面应用，路由这个概念并不是vue-router出来的时候才提出来的，多页面应用没有路由这个概念

路由中有三个基本的概念 route, routes, router。
1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3， router 是一个机制，相当于一个管理者，它来管理路由。

vue3中useRouter和 useRoute要注意区分开，useRouter是一个路由的管理机制，跳转路由只能用它。而获取跳转传参的数
据时，可以用useRouter和 useRoute对象，但得到的对象不同，获取参数的方式也就不同
import { useRouter，useRoute } from 'vue-router'

要在路由配置里拼接下url的参数，否则会一刷新就没数据了，若配置拼接的参数，刷新时数据还保留，即缓存

$route 和 $router 的区别是什么？
$route 是 “路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。

$router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面包含有很多属性和子对象，例如 history 对象，经常使用的跳转链接就可以用 this.router.push 会往 history 栈中添加一个新的记录，返回上一个 history 也是使用 $router.back方法。

多页面应用（MPA Multi-page Application）：
　　　　多页面跳转需要刷新所有资源，每个公共资源(js、css等)需选择性重新加载
　　　　页面跳转：使用window.location.href = “./index.html”进行页面间的跳转；
　　　　数据传递：可以使用path?account=”123”&password=””路径携带数据传递的方式，或者localstorage、cookie等存储方式
　　　　url 模式：a.com/pageone.html

单页面应用（SPA Single-page Application）：
　　　　只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次
　　　　页面跳转：利用hash去封装路由；
　　　　数据传递：可通过全局变量或者参数传递，进行相关数据交互 　
　 url 模式： a.com/#/pageone

SPA （single-page application）指的是 一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过路由来实现，公共资源部分只加载一次。
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面（不重新向后端发出请求）

vue-router是vue.js的路由插件，组件包括如下

<router-link  :to=""  active-class="router-link-active"></router-link>  //路由声明式跳转 ，active-class是标签被点击时声明一个类对应的样式
<router-view>               //渲染路由的容器

hash 模式（支持低版本浏览器和ie浏览器，早期前端路由）
我们先来认识下这位朋友#，这个#就是hash符号，中文名哈希符或锚点，当然这在我们前端领域姑且这么称呼。
然后哈希符后面的值，我们称之为哈希值。OK，接下来我们继续分析他的原理。路由的哈希模式其实是利用了window监听hash值改变，也就是说你的url中的哈希值（#后面的值）如果有变化，前端是可以做到监听并做一些响应（搞点事情），这么一来，即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。
早期前端路由其实就是Hash 地址与页面之间的对应关系。
hash 模式的工作原理：
① 用户 点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 通过window.hashChange事件来监听 hash 值的变化
④ 前端路由跳转到 当前 Hash 地址对应的页面并渲染

history模式（HTML5新推出的API， back、forward、go就是history对象的）
我们先介绍一下H5新推出的两个神器：pushState与replaceState ，history模式中的原理。
pushState：
浏览器不会向服务端请求数据，直接改变url地址，浏览器会记录pushState的历史记录，可以使用浏览器的前进、后退功能作用。
replaceState ：
不同于pushState，replaceState仅仅是修改了对应的历史记录。

如何去解决history模式下刷新报404的弊端呢，这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html）

history模式的工作原理：（利用自带的方法）
通过 pushState（新增一个历史记录） 和 replaceState （直接替换当前的历史记录）两个API 来操作实现 URL 的变化，然后通过 window.onpopstate（h5新增的API）事件来监听 URL 的变化，从而对页面进行跳转（渲染）

vue-router意义在于帮你快速的构建单页面应用

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

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。vue-router源码中封装push() 和 replace() 方法。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（这两个方法是浏览器自带的）。这两个方法应用于浏览器的历史记录栈，在history 对象的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前URL改变了，但浏览器不会刷新页面(请求后端)，这就为单页应用前端路由“更新视图但不重新请求”提供了基础。
浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构，可以把它想象成一摞盘子，用户每点开一个新网页，都会在上面加一个新盘子，叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子，叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。

两种模式比较
hash模式 会在浏览器的URL中加入’#‘，而HTM5History就没有’#'号，URL和正常的URL一样。
另外：
history.pushState()相比于hash的直接修改主要有以下优势：
pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
pushState可额外设置title属性供后续使用