前端路由&webpack基础配置

栏目: 编程工具 · 发布时间: 5年前

  • 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>
      复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

运营前线 2

运营前线 2

兰军 等著 / 机械工业出版社 / 2017-4 / 69.00

“运营前线”是一个系列,目前已经出版2部,与“产品前线”一样,该系列书也由资深的产品和运营专家兰军(Blues)领衔策划和写作,旨在梳理和总结国内一线互联网公司的运营方法和技巧,让所有产品人和运营人都有机会了解和学习这些大的互联网公司是如何做运营的。 这2部作品汇集了来自腾讯、阿里、百度、360、迅雷、YY、小米、爱奇艺、乐视等数十家大型互联网公司的一线运营专家的技巧和方法论。共包含9大运营......一起来看看 《运营前线 2》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码