- SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能
-
优点:
- 不需要跳转页面,局部更新页面内容
- 前端组件化
-
缺点:
- 首屏加载慢(第一次访问慢,按需加载)
- 开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发)
- 不利于SEO搜索引擎优化(使用服务端渲染)
2. 前端路由:
- 根据不用的URL标识符渲染不同的组件(不同的网页内容)
-
路由实现原理:
-
hash哈希(锚点)
通过hashchange监听URL标识符改变,显示不同的内容
<ul> <li><a href="#login">鲁班</a></li> <li><a href="#home">提莫</a></li> <li><a href="#list">剑姬</a></li> </ul> <div id="app"></div> <script> // 监听hash值的不用,让页面显示不同的内容 window.onhashchange = function() { let app = document.getElementById('app'); // 获取hash值 let hash = location.hash.substr(1); // 根据标识展现不同的内容 局部更新 switch(hash) { case 'login': app.innerHTML = '托马斯回旋...'; break; case 'home': app.innerHTML = '正在路上...'; break; case 'list': app.innerHTML = '华尔兹...'; break; } } </script> 复制代码
-
hash哈希(锚点)
通过hashchange监听URL标识符改变,显示不同的内容
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。