前端路由的功能
- 改变url不向服务器发送请求
- 检测url的变化
- 解析url的信息来匹配路由规则
- hash模式和history模式都能够实现这个功能
hash模式
- 指的就是#和之后的字符
- hash也称作锚点,本身是作为页面定位的,可以是id对应元素显示在可视区域内。
- hash改变不会向浏览器发送请求
- hash改变会触发hashChange事件
- 浏览器的前进和后退,能够控制hash值
- html5 的history之前,都是使用hash来实现前端路由的
- hash本来是用来做页面定位的,如果用来做路由的话,锚点功能就不能用了
- hash的路由传参,有体积的限制,因为传参基于url
- hash之后的内容,不会包含在请求中
- 只能修改#之后的,所以只能设置与当前同文档的url
- 设置与当前相同的url,历史记录不会增加
history模式
- 路由传参,可以放在url里面,也可以单独放在一个对象里面
- 改变不会向浏览器发送请求
- 改变会触发onpopstate事件
- 可以设置当前同源文档的任何url
- pushState设置与当前相同的url,历史记录还是会增加
- 需要后端配合,增加一个覆盖所有情况的候选资源,如果匹配不到任何资源可以指向index.html。否则用户刷新页面,就会404
posted on
2022-03-16 11:33
社会优先于个人
阅读(
132)
评论()
收藏
举报