了解前端路由
路由有两种模式
1. 传统模式
传统模式呈现的界面,每次跳转页面都会刷新,重新加载静态资源,呈现的内容通过后端返回的html渲染。 缺点: 用户体验差, 优点 SEO 好
2. 前端路由 (单页面应用)
不同于传统路由。前端路由是 URL 与 UI 之间的映射关系,URL 改变驱动UI变化,也就是单向映射,不需要刷新页面 。 随着页面复杂化和需求逐日增多,前端开始走向 模块化和组件化, 使代码变得难维护,不可控,迭代难, 这时就有了 react,vue,ng 等, 共同的特点就是通过 js 去渲染页面,在页面上只有一个根入口,本质就是通过html5 API 对 url 进行改变和监听,来让dom 元素显示对应的视图
**单页面应用有什么特点**
跳转不好刷新页面,局部更新,用户体验好。
对服务器压力小 服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍
前后端分离 前端只做页面展示, 后端只做数据存储和计算
**缺点**
首次加载慢 首次加载会加载所有资源, 可以使用路由懒加载
SEO 差 可以使用服务端渲染
页面复杂度增加
单页面应用有两种模式 hash history ,怎么能改变url 而不刷新页面, H5提供了两个API onhashchange 和 onpopstate
1、hash 模式
当URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL部分,包括#符号)
路由里面#不叫锚点,称为hash
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 </head> 9 <body> 10 <a href="#/page1">page1</a> 11 <a href="#/page2">page2</a> 12 <div id="root"></div> 13 <script> 14 let app = null; 15 // hashchange 首次进入不会自执行,需要手动触发 16 window.onload = () => { 17 app = document.querySelector('#root'); 18 handleHashChange(); 19 }; 20 window.addEventListener('hashchange', handleHashChange); 21 function handleHashChange() { 22 console.log(location.hash); 23 switch (location.hash) { 24 case '#/page1': 25 app.innerHTML = '你好'; 26 break; 27 case '#/page2': 28 app.innerHTML = '他好'; 29 break; 30 default: 31 app.innerHTML = '哈喽,'; 32 break; 33 } 34 } 35 </script> 36 </body> 37 </html>
2、history 模式
history模式其实跟hash模式path差不多 没有#而已,监听的方法不同
pushState 向当前浏览器会话的历史堆栈中添加一个历史记录
replaceState 向当前浏览器会话的历史堆栈中修改一个历史记录
popstate 可以监听浏览器历史站的前进后退行为, history.back() history.forward() history.go()
MDN上标注 history.pushState()或者 history.replaceState()不会触发popstate事件。popstate事件只会在浏览器某些行为下触发, 比 如点击后退、前进按钮(或者在JavaScript中调用 history.back()、history.forward()、history.go()方法),此外,a 标签的锚点也会触发该事件.
注意: history模式 需要后端配合,页面跳转子路由后页面正常,但是刷新页面访问不到了,请求当前url 的路径, 服务器没有响应的响应或者资源 就会出现404,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。