SPA应用(单页应用)
优点:
- 用户体验好,用户操作更方便
- 完全的前端组件化
缺点:
- 首次加载大量资源
-->
解决:按需加载 - 对SEO不友好
-->
解决:服务端渲染nuxt
特点:当有不同的请求时,在同一个页面渲染不同的组件
原理:前后端分离(后端专注数据,前端专注交互与可视化)+ 前端路由
一、hsah 路由
Hash 路由(也就是锚点#),本质是是改变location
的hash
属性
利用 URL 上的 hash,当 hash 改变不会引起页面刷新,可以触发相应的 hashchange 回调函数配置路由(VueRouter会自动监听)
window.onhashchange = function() {
//更新页面内容
document.getElementById("demo").innerHTML = x
......
}
二、history 路由
本质是通过h5新增的history.pushState({},'','/home')
或history.replaceState({},'','/home')
改变路径
pushState()、replaceState() 方法接收三个参数:stateObj、title、url
history.pushState({
color: "red"}, "red", "red") //设置状态
window.onpopstate = function(event) {
//监听状态
if(event.state && event.state.color === "red") {
document.body.style.color = "red" //更新页面内容
}
}
history 对比 hash
优势:
-
pushState 设置的 url 可以是同源下的任意 url ;而 hash 只能修改 # 后面的部分,因此只能设置当前 url 同文档的 url
-
pushState 设置的新的 url 可以与当前 url 一样,这样也会把记录添加到栈中;hash 设置的新值不能与原来的一样,一样的值不会触发动作将记录添加到栈中
-
pushState 通过 stateObject 参数可以将任何数据类型添加到记录中;hash 只能添加短字符串
-
pushState 可以设置额外的 title 属性供后续使用
劣势:
-
history 在刷新页面时,如果服务器中没有相应的响应或资源,就会出现404。因此,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面
-
hash 模式下,仅 # 之前的内容包含在 http 请求中,对后端来说,即使没有对路由做到全面覆盖,也不会报 404