前端路由
使用Vue+vue-router创建单页应用十分简单, vue-router提供的功能是将组件映射到路由, 然后渲染出来. 所以vue-router需要满足两个需求
- 记录当前页面的状态
- 可以使用浏览器的前进后退功能
而vue-router为了满足以上两个需求实现以下三个功能
- 改变URL且不让浏览器向服务器发出请求
- 检测URL的改变
- 截获URL地址, 并解析出需要的信息来匹配路由规则
hash模式的特点
hash表示的是地址栏URL中#符号(也称作为锚点), hash虽然会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面.
由于hash值变化不会引起浏览器向服务器发出请求, 而且hash改变会触发hashchange事件, 浏览器的进后退也能对其进行控制, 所以在HTML5之前, 基本都是使用hash来实现前端路由.
history模式的特点
利用了HTML5新增的pushState()和replaceState()两个api, 通过这两个api完成URL跳转不会重新加载页面
同时history模式解决了hash模式存在的问题. hash的传参是基于URL的, 如果要传递复杂的数据, 会有体积限制, 而history模式不仅可以在URL里传参, 也可以将数据存放到一个特定的对象中
vue-router实现
hash模式和history模式实现vue-router跳转api的区别
| api | hash | history |
|---|---|---|
| push | window.location.assign | window.history.pushState |
| replace | window.location.replace | window.history.replaceState |
| go | window.history.go | window.history.go |
| back | window.history.go(-1) | window.history.go(-1) |
| forward | window.history.go(1) | window.history.go(1) |
