【WEB】前端路由

112 阅读1分钟

路由

路由这个概念最先是后端出现。

  • 浏览器发出请求
  • 服务端监听到80端口(或443)有请求过来,并解析URL 路径
  • 服务端返回相应信息(.html、.php、json、图片等)
  • 浏览器根据数据包的Content-Type来解析数据 这就是SSR 服务端渲染,直接返回页面

前端路由

本质是检测url的变化,截获url地址,然后解析来匹配路由规则。

路由hash模式

url中# 后面的hash值变化,不会导致浏览器向服务器发出请求,页面不会刷新。

  • 通过监听hashchange 事件,检测hash值的变化
  • 检测hash值的变化,通过替换DOM 的方式实现页面的更换

路由histroy模式

不再通过hash值的变化,来跳转URL,需要后端支持

  • 在服务端增加一个覆盖所有情况的候选资源,如果URL匹配不到任何静态资源,则应该返回同一个index.html 页面,也就是app依赖页面
  • 通过监听popstate事件,匹配路由,更新页面的DOM