前端路由的两种模式
参考文章:hash模式和 history模式
核心要点记录:
- 前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求
- 单页面应用(只有一个
html
文件)利用js
动态变换网页内容,避免了页面重载;路由提供了浏览器地址变化,网页内容也跟随变化 -
vue-router
默认hash
模式 -
hash
模式 - #:hash
就是#
后面的字符 - 不会被包括在http
请求中;window.location.hash
读写 - 写入时,不会重载网页,但会创造一条访问历史记录,可后退;onhashchange
监听hash
的变更 -
history
模式 - 历史记录栈:window.history.popState(state, title, url)
、window.history.pushState()
,再基于已有的back
、forward
、go
方法,对历史记录栈进行修改 - 改变当前 URL;
优缺点对比
hash | history.pushState() | |
---|---|---|
URL更换 | 不能更换URL,只能改变 # 后面部分 |
可以更换为新的同源任意URL |
相同值变化 | 只有新值才会触发将记录添加到栈 | 新旧同一个URL也会添加到记录栈中 |
记录中的类型 | 只有 string 类型 |
通过 stateObject 参数添加任意类型 |
可额外设置 title 类型 |