浅谈前端路由🏃

什么是路由👻

当提到路由的时候你会想到什么？ 路由器？简单来说，路由就是URL到函数的映射

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

• 早期的网站开发的所有页面都是由服务器来进行渲染的，服务器直接生产渲染好的HTML页面返回给客户端显示
• 一个页面有自己对应的URL，当你输入URL的时候会将这个URL发送到服务器，服务器通过正则进行匹配处理，最终生成HTML和数据返回给前端
• 以上就是后端路由，简单来说路由就是用来跟后端服务器进行交互的一种方式
• 但是这种方式很糟糕的情况就是整个页面都由后端人员来维护，如果前端人员需要开发页面就要通过修改JSP等页面进行修改，这种情况下HTML页面代码和逻辑会混合在一起，无论是编写还是维护都很糟糕和麻烦
• 于是就出现了前后端分离的阶段
• 
  

前后端分离🚀

• 随着Ajax的出现，有了前后端分离的开发模式
• 当我们请求数据接口的时候，后端只提供API来返回数据，前端通过Ajax来获取数据并渲染到页面中
• 这样可以很清晰的分配前后端的职责，让前端专心于用户的交互和可视化，让后端专心于数据的处理
• 
  

SPA(单页Web应用)阶段🍻

• 在传统的网页中，每个HTML文件都是一个完成的HTML页面，每当访问一个URL就要去服务端请求大量的数据，不单单增加了性能损耗还破换了用户浏览体验
• 在SPA(单页Web应用)中，单纯的浏览器地址改变, 利用了JavaScript动态变换网页内容，网页不会重载
• 简单来说就是在单页面Web网页中, 页面的切换就是视图之间的切换
• 其实SPA最主要的特点就是在前后端分离基础上加了一层前端路由

前端路由的核心

• 改变URL，但是页面不进行整体的刷新
• 而网站与用户交互时不进行整体刷新的同时，可以有局部的内容进行改变
• 前端渲染把渲染的任务交给了浏览器，通过客户端来解决页面的构建，这个很大程度上缓解了服务端的压力。而且配合前端路由，无缝的页面切换体验自然是对用户友好的。

说了这么多，那该如何实现呢？接下来说到的hash（哈希）模式和history模式就是前端路由的实现方式

hash模式

• hash是URL中hash(#)及后面的那部分，常用作锚点在页面内进行导航，改变URL中的hash部分不会引起页面刷新
• 浏览器不会对#号后面的路径对服务端发起路由请求，也就是说当你请求一个https://juejin.cn/#123和https://juejin.cn/其实到服务端都是去请求https://juejin.cn/这个页面的内容
• hash的改变会通过触发hashchange事件监听URL的变化，来渲染对应的页面，通过浏览器前进后退改变URL、通过标签改变URL、通过window.location改变URL，这几种情况改变URL都会触发hashchange事件

常用的API

window.location.hash = '123' // 设置 url 的hash，会在当前url后加上 '#123'
let hash = window.location.hash  
console.log(hash) //#123
window.addEventListener('hashchange', function(){ 
    // 监听hash变化
})
复制代码

history模式

• window.history属性指向history对象，它表示当前窗口的浏览历史
• history对象保存了当前窗口访问过的所有页面网址,通过window.history.length可以得出当前窗口一共访问过几个网址，通过window.history.state可以得到History堆栈最上层的状态值

window.history.length //4
window.history.state //null
复制代码

在history模式中，URL不带#号，那他看起来就和通常的URL一样了，那该如何改变URL不引起页面刷新呢？

那么就需要用到在HTML5的规范中,history对象新增了的pushState和replaceState两个方法， 这两个方法都接受三个参数(state, title, url)

• state:需要保存的数据对象，通过pushState方法可以将该对象内容传递到新页面中
• title:指标题，但一般用不到，没有浏览器可以支持填null即可
• url：设定新的历史记录的url，必须与当前页面处在同一个域，不指定的话则为当前的路径，如果设置了一个跨域网址，则会报错，这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上，因为这个方法不会导致页面跳转，url可以是绝对路径，也可以是相对路径

history.pushState()

• 该方法可以理解为在历史记录添加一条记录

let state={
    app:'sth'
}
window.history.pushState(state, '', '') 
console.log(window.history.state) //{app:"sth"}
console.log(window.history.length)//每执行一次pushState则会改变
复制代码

• url设置了跨域网址则会报错

history.replaceState()

• history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。

let state={
    app:'sth'
}
window.history.replaceState(state, '', '') 
console.log(window.history.state) //{app:"sth"}
console.log(window.history.length)//每执行replaceState不会改变
复制代码

由于history.pushState()和history.replaceState()可以改变url同时，不会刷新页面，所以在HTML5中的histroy也具备了实现前端路由的能力

两种模式的比较👈

写在最后👋

• 前端路由的核心实现原理理解起来其实很简单，但是结合具体框架后(vue-router,react-router)，框架增加了很多特性，如动态路由、路由参数、路由动画等等，这些导致路由实现变的复杂
• 但是只要真正理解了其中遇到问题也就迎刃而解了，在写这篇文章的时候也让我重新巩固梳理了基础，所以只要把学到的东西善于总结起来就会不断扩充自己的大脑
• 如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😛

参考

hash模式和history模式

前端路由是什么东西？