前端路由概述和实现原理

前端路由

路由概念

• 如何理解路由？
  • 路由器：负责分发消息
• 后端路由（MVC）
  • 根据不同的用户请求，响应不同的内容（早期多数都是网页；现在更多的是json数据）
• 前端路由
  • 根据不同的用户行为（事件）展示不同的页面效果（组件），组件中需要的数据可能来自于后端，也可能是前端写死的数据

SPA（Single Page Application）单页面应用

• 前端路由要解决的问题：SPA应用的局部更新问题，并且还要支持浏览器地址栏的回退功能
• 通过前端路由实现单页面应用（局部更新）
  • 页面的变化是通过局部更新来实现的
  • 可能会涉及到后台的接口调用ajax
  • 支持浏览器地址栏回退功能
  • 前端渲染：动态的把服务器获取到的数据填充到HTML标签中

前端路由原理

hash 哈希（锚点）：

• schema://host:port/path?query#fragment
  • schema：协议 http/https/ftp/files
  • host: 域名或者IP地址
  • port: 端口，http协议的默认端口80
  • path: 路径 /a/b/c
  • query: 查询字符串 uname=lisi&age=12
  • fragment: 哈希 hash 锚点
• http://www.baidu.com:80/a/b/c?uname=lisi&age=12#info
• http://www.baidu.com:80/a/b/c?uname=lisi&age=12#msg
• hash的变化不会导致浏览器发送请求到服务器
• 当hash变化时，可以修改页面的内容

history api：

<div>
    <ul>
        <li>
            <a href="#home">主页</a>
        </li>
        <li>
            <a href="#tech">科技</a>
        </li>
        <li>
            <a href="#edu">教育</a>
        </li>
    </ul>
    <div id="content"></div>
</div>

window.onhashchange = function() {
  // 根据hash值的不同，让页面显示不同的内容
  let info = document.getElementById('info');
  // 获取hash值
  let hash = location.hash.substr(1);
  // 更新页面内容
  switch(hash){
    case 'home':
      info.innerHTML = '主页信息';
      break;
    case 'news':
      info.innerHTML = '新闻信息';
      break;
    case 'tech':
      info.innerHTML = '科技信息';
      break;
  }
}