对SPA(单页应用)的理解?

理解:

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

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

实现一个SPA

写在前面：通常 SPA 中前端路由有2种实现方式：

- window.history
- location.hash

原理

• 监听地址栏中hash变化驱动界面变化 —location.hash
• 用pushstate记录浏览器的变化,驱动页面变化 -----window.history

实现

hash模式

• 通过监听url中的hash来进行路由跳转.

• 利用浏览器对锚点的处理,锚点是指浏览器末端"#"后面的内容,这部分值既不会提交给浏览器也不会是浏览器刷新.是用来快速定位页面的某一位置

• location.hash本身就是一个可读写的属性,可以通过location.hash 或者location.assign修改hash值

• 不过以上两种方式都会在浏览器中留下历史痕迹，如果想在跳转的时候不保留之前的url历史，可以通过location.replace方法修改url以及hash

• window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件

  • 直接更改浏览器地址，在最后面增加或改变#hash；
  • 通过改变location.href或location.hash的值；
  • 通过触发点击带锚点的链接；
  • 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同

Vue-router通过监听hash的变化,加载不同的组件.

history

• window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法:

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(n) - 接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面
如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

• history.pushState 浏览器历史纪录添加记录

• history.replaceState修改浏览器历史纪录中当前纪录

• history.popState 当 history 发生变化时触发

• html5标准对history进行了扩展, 提供了两个新的api函数, 通过他们修改url页面不会刷新

• history.pushState 功能和lication.assign类似,只是出了直接修改url不刷新页面外,同时还可以向监听函数传递参数

• 另一个就是history.replaceState函数, 功能和location.replace类似, 他也是控制页面跳转时不留下痕迹.

history.pushState(stateObj,title,url)

stateObj ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

.history.replaceState

replaceState(stateObj, title, url) 和pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其余和 pushState一模一样