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 依赖的页面。
网友评论