1.前端路由定义路由可以简单理解为一个url地址，映射到服务器时可能是文件读取操作，数据库查询或者数据处理；而前端对应的是一个dom操作，卸载或隐藏部分dom节点，显示其他的。2.前端路由的实现前端路由分为哈希路由和历史路由。早期的前端路由是基于哈希路由实现的。所谓hash路由就是url中#后面的部分，如：https://www.word.com#searchlocation.hash具有以下特点：1、url中hash部分为前端Status，hash值的变化不会向服务器发送消息，只是前端状态变化。2、location.hash的改变会导致在浏览器的浏览历史中插入一条新的记录，这样就可以通过浏览器的前进/后退按钮来改变location.hash。3、可以通过监听hashchange事件来监听location.hash的变化，从而在hash发生变化时进行相应的操作。下面先实现一个哈希路由和历史路由的基类：classBaseRoute{constructor(list){this.list=list;}render(state){letele=this.list.find(item=>item.path===state);ele=ele?电？this.list.find(item=>item.path==='*');ELEMENT.innerText=ele.component;}以下是散列路由的补充实现：classHashRouteextendsBaseRoute{constructor(list){super(list);这个。处理程序（）；window.addEventListener('hashchange',this.handler.bind(this));}getState(){让hash=location.hash;返回哈希？hash.slice(1):'/';}handler(){this.render(this.getState());}push(path){window.location.hash=path;}getUrl(path){consthref=window.location.href;consti=href.indexOf('#');constbase=i>=0?href.slice(0,i):href;返回基础+'#'+路径；}替换（路径）{窗口。地点。替换（这个。getUrl（路径））；}去（n）{窗口。ory.go(n);}}html5之后，浏览器提供了新的HistoryAPI来改变url，pushState和replaceStatepushState和replaceState可以在不刷新页面的情况下改变页面url，pushState可以在浏览历史中插入一条记录，replaceState实现替换了当前浏览历史与新浏览历史。可以通过监听popState来监听路由变化，但是pushState和replaceState不会触发popState事件。因此，在使用pushState和replaceState时，需要主动调用response函数。下面是历史路由的实现：classHistoryRouteextendsBaseRoute{constructor(list){super(list);这个。处理程序（）；window.addEventListenter('popstate',this.handler.bind(this));}//渲染页面handler(){this.render(this.getState());}//获取urlgetState(){constpath=window.location.pathname;返回路径？小路：'/';}//推送页面push(path){history.pushState(null,null,path);这个。处理程序（）；}//替换页面replace(path){history.replaceState(null,null,path);这个。处理程序（）；}//向前或向后浏览历史记录go(n){window.history.go(n);}}注意：history路由需要和服务端访问层（ngix）一起修改，前端发送给服务端的路由代理到文件上的webapp的js。位置/test/mywebapp{autoindexon;索引index.html；try_files$uri/test/mywebapp/index.html;}3.前端路由库分析比较流行的前端路由库history提供了三种路由模式BrowserHistory和HashHistory以及MemoryHistory，其中BrowserHistory和HashHistory分别对应上面的history路由和hash路由，MemoryHistory是内存路由反应本机。具体代码比较简单，只是在上面基本路由思想的基础上加了个block。当路由变化时，添加一个block可以阻断路由变化，当阻断解除后再执行路由变化。你可以在这里放一些业务逻辑，比如退出和保留。react-router库是一个基于react的组件库，提供了三个react组件：router、routes、route。实现的基本功能有：1.根据路由匹配实现基于路由的渲染功能；2.为子组件提供历史、导航等状态和方法，子组件需要使用包中提供的函数钩子自行访问。react-router-dom基于history和react-router两个库。是一个web前端路由组件库，提供了两个路由组件BrowserRouter和HashRouter。
