前端路由(一) 路由,hash,history

从vue-router回溯相关原理和知识点

前端路由(二)hash实现路由示例

什么是路由

• 路由是URL解析对应的函数的映射

从用户的角度看:

• 记录当前页面状态,例如保存当前页的url再次打开url时,网页还是保存时的状态
• 可以使用浏览器无刷新的前进后退功能,可以使页面回到使用ajax更新页面之前的状态,url也回到之前的状态

从开发的角度:

• 改变url且不让浏览器向服务器发出请求,非ajax无刷新更新视图区域内容
• 监测url变化
• 截获url地址,解析出需要的信息来匹配路由规则

什么是服务端路由

• 收到客户端发来的HTTP请求时根据请求的URL找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端
• 对于简单的静态资源服务器相当于URL的映射函数就是一个文件读取操作
• 对于动态资源映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理

什么是客户端路由

• 路由的映射函数通常是进行一些DOM的显示和隐藏操作当访问不同的路径的时候，会显示不同的页面组件
• vue-router等相当于一个容器,路由控制器,管理所有路由与组件(或函数)之间的映射
• 前端路由基于hash & history

hash模式

hash指url后的#号及后面的字符(例如https://www.baidu.com/#/liv),这里的#和css里的#是一个意思,hash也称作锚点,本身是用来做页面定位,hash可以使对应的id的元素显式在可视区域内
由于hash值变化不会让浏览器向服务器发出请求,而且hash改变会触发浏览器的hashchange事件,浏览器的前进后退也能对其控制,在html5的history出现前,使用hahs来实现前端路由

api:

widnow.location.hash = '/qq'  设置 url 的 hash，会在当前url后加上 '#/qq'

var hash = window.location.hash // '#/qq'

window.addEventListener('hashchange', function(){//监听hash变化,点击浏览器的前进后退会触发})
复制代码

history模式

相对于history模式,hash则可以兼容到IE8,history只能兼容到IE10
hash本来是用于做页面定位,如果用于实现路由,则原来的锚点功能就不可用
hash是基于url传参,如果要传递复杂的数据,会受限于体积限制 history可以在url里放置参数,还可以将数据存放在一个特定的对象中

vue-router官方文档说 , 不想要很丑的hash,可以用路由的history模式

api:

window.history.pushState(state, title, url)
// state 需要保存的数据,该数据在触发popstate事件时,可以在event.state里获取
// title 标题,一般传null
// url 设定新的历史记录的url,新的url与当前的url的origin必须一致,否则报错,url可以使绝对路径或者相对路径
// https://www.baidu.com/a/ 执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/
// 执行history.pushState(null, null, '/qq/'),则变成https://www.baidu.com/qq/

window.history.replaceState(state, title, url)
// 修改当前历史记录,pushState是创建新的历史记录

window.addEventListener('popstate', function(){
    //监听浏览器前进后退时间, pushState与replaceState方法不会触发
})

window.history.back()//后退
window.history.forward()//前进
window.history.go(1)// 前进一步,-2后退两步
window.history.lengthk//查看当前历史堆栈中页面的数量
复制代码

history模式改变url的方式会导致浏览器向服务器发送请求, so, 需要在服务器端做处理 , 匹配不到任何静态资源的时候 , 服务器端始终向客户端返回同一个html的页面