路由实现原理

路由的实现原理

路由(react-router)

什么是路由

这个概念最先是后端出现的，在以前用模板引擎开发页面时，经常会看到这样：

  http://www.baidu.com/forum.ejs
  http://www.baidu.com/forum.asp
  http://www.baidu.com/forum.jsp
  http://www.baidu.com/forum.php

页面开发模式

• 静态化开发
  • ejs
  • lua
• SSR (服务器渲染)
  • nuxt
  • next

• SPA (单页面开发)

• • Angularjs
  • react
  • vue

路由的分类 

• 后端路由：

　　　　URL 与处理函数之间的映射关系

• • 1.浏览器发出请求
  • 2.服务器监听到端口有请求过来，并解析url路径
  • 3.根据服务器的路由配置，返回相应信息(可以是 html 字串，也可以是 json 数据，图片等)
  • 4.浏览器根据数据包的Content-Type来决定如何解析数据

• 前端路由：

  　　URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新(无需刷新页面)=

• • hash
  • history

hash路由

• 通过 hashchange 事件监听hash路由变化，通过location.hash获取hsah的地址，根据地址进行渲染，hash路由不会发起ajax请求

const   onHashChange=()=> {
        switch (location.hash) {
          case '#/home':
            this.routerView.innerHTML = 'Home'
            return
          case '#/about':
            this.routerView.innerHTML = 'About'
            return
          default:
            return
        }
      }
window.addEventListener('hashchange', () => onHashChange(), false)

history 路由

很早以前，浏览器便实现了 history。然而，早期的 history 只能用于多页面进行跳转，比如：

history.go(-1);       // 后退一页
history.go(2);        // 前进两页
history.forward();     // 前进一页
history.back();      // 后退一页

在 HTML5 规范中，history 新增了以下几个 API

  history.pushState(state,title,url);         // 添加新的状态到历史状态栈
  history.replaceState(state,title,url);     // 用新的状态代替当前状态
  history.state             // 返回当前状态对象

history内部实现代码

const state = {name : 'zhangsan'}
const title = ''
const URL = '/home'
const  onPopState=()=> {
        switch (location.pathname) {
          case '/home':
            this.routerView.innerHTML = 'Home'
            return
          case '/about':
            this.routerView.innerHTML = 'About'
            return
          default:
            return
        }
      }
history.pushState(state,title,url); 
监听history路由变化
window.addEventListener('popstate', () => onPopState(), false)