前端路由原理
1、传统开发方式url改变后，立刻发生请求响应整个页面，有可能资源过多，传统的开发会让页面出现白屏
2、SPA single Page Appliction
3、单页面应用：锚点值的改变不会立刻发送请求，而是在某个合适的机会发起ajax请求，局部改变的数据
4、优点：用户的体验好，页面不立刻跳转
5、前端路由
* 锚点值监视
* ajax获取动态数据
* 核心点是锚点值
* 前端框架 Vue/angular/react都很适合开发单页应用
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>前端路由的原理</title> </head> <body> <a href="#/login">登录</a> <a href="#/register">注册</a> <div id="app"></div> </body> </html> <script> // 获取元素 var view=document.getElementById("app"); // onhashchange: 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 window.onhashchange=function(){ // hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分） console.log(location.hash); switch (location.hash) { case '#/login': view.innerHTML='<h1>我是一个登录页面</h1>' break; case '#/register': view.innerHTML='<h1>我是一个注册页面</h1>' break; default: // statements_def break; } } </script>