theme: condensed-night-purple
highlight: a11y-dark
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是路由
路由是一个网络工程里面的术语。 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科
路由器是做什么的? 你有想过吗?
路由器提供了两种机制: 路由和转送.
路由是决定数据包从来源到目的地的路径. 转送将输入端的数据转移到合适的输出端.
路由中有一个非常重要的概念叫路由表. 路由表本质上就是一个映射表, 决定了数据包的指向.
映射表: [ 内网ip1 : 设备标识1, 内网ip2 : 设备标识2, ] 发送信息时，使用公网ip，路由通过映射表找到信息要传输的端口，发送到对应设备
https://blog.csdn.net/weixin_51398691/article/details/119562408
内网IP：192.168.1.110 公网IP：202.111.23.45
IP必须唯一 物理层 数据链路层 传输层 网络层 会话层 表示层 应用层 MAC地址是具有唯一性的，每一台电脑的MAC值都是不一样的，相当于每一台电脑的身份证！ mac地址是网卡的唯一标识
p101
前端路由的规则
改变URL而不刷新页面
URL的hash
URL的hash也就是锚点(#), 本质上是改变window.location的href属性. 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
配置前端路由，当网址的hash改变后，不会向服务器请求全部资源，而是通过路由映射关系，查找需要渲染的组件，取出放到网页进行渲染，vue-router会自动监听改变
```js 原先：http://localhost:8080/#/
location.hash = 'aaa' http://localhost:8080/#/aaa ```
HTML5的history模式
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面
history.pushState({data},'title','url')
入栈操作,网页会保存栈内内容，前进--将之前的栈的内容入栈，后退--出栈
history.replaceState({data},'title','url')
替换，没有历史记录，不能后退
replace() - 可以使用一个新的页面替换当前的页面，调用完毕后也会跳转页面 - 但是不会生成历史记录，不能使用回退按钮回退
pushState是开启一个新的页面，replaceState是修改当且页面
history.go() 对栈进行操作
go应该不会弹出栈，只是改变指针的指向，数据不出栈 go(0)是刷新
上面只演示了三个方法 因为 history.back() 等价于 history.go(-1) 出栈，网页会保存栈内内容，再次 history.forward() 等价于 history.go(1) 这三个接口等同于浏览器界面的前进后退。
课代表来了，用这个可以去#，面试会用到的哦：history.go(-1) 锚点定位html基础里面的东西，配合location对象使用，不清楚的话，回去啃一下 因为在#后面啊 #后面的内容叫做url的锚 就是不刷新的 这节课太重要了 说白了就是改变url的显示 但是不需要重新请求服务器 大家注意一下，最新版的ios系统不再支持以上讲的几个函数，做mac端和手机端的大伙都注意一下！！！20200722