经典面试题

1. 访问网站的过程发生了是？

• 通过 网址
• 先去缓存中读取文件来进行渲染
  （没有本地缓存，或第三方缓存）根据域名去解析获得对应的IP，并与对应 IP 的服务器建立链接
• 然后访问对应IP的硬件服务器上的Web服务器建立链接 （通过 TCP 做三次握手 ）
• 握手成功后，web服务器会返回給前端 页面标签、地址、内容
• 前端拿到 资源 后会进行渲染

【注】网址包括：协议、域名（主机）、端口、路径

2. Vue的两种路由模式？

在vue-router路由对象中，路由有两种模式：hash 和 history，而默认的是hash模式.

hash 路由

• onhashchange 事件，可以在 windows 对象上监听这个事件:

windows.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hasg  //通过location对象来获取hash地址
    console.log(hash)  // #/notebooks/123456/list  地址从#号开始
}

因为hash发生变化的url都会被浏览器记录下来，从而会发现浏览器的前进后退都可以用

history 路由

• 随着 history api的到来，前端路由开始进化了，前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由，history api可以分为两大部分，切换和修改、切换历史状态

  包括 back,forward,go三个方法，对应浏览器的前进，后退，跳转操作。很多小伙伴只知道浏览器有前进和后退，其实在前进后退上长按鼠标，会弹出历史记录，从而完成跳转.

history.go(-2); //后退两次
history.go(2);//前进两次
history.back();//后退
history.forward();前进

修改历史状态
包括了pushState,replaceState两个方法，这两个方法接受三个参数：stateObj,title,url

history.pushState({color:'red','red','red'})
history.back();

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象.
history 模式的补充
对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也真是称之为单页面的原因，而vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。而当开启history模式的时候，如果后端不进行任何处理，在Dev阶段一切都是正常的，可是打包之后，访问路径则会返回404，因此要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是app 依赖的页面。

引用：https://www.jianshu.com/p/f7326622d49e