vue-route什么是VueRouter是Vue.js官方的路由管理器。早期html模板存在于服务器端，根据浏览器输入的不同路径，服务器端会根据不同的路径渲染不同的模板。这种痛点就是用户每次操作都要刷新页面，比如很久以前的论坛，一操作就跳转。交互体验很差。然后是Ajax异步加载，但是多页面的跳转还是有点不尽如人意，于是就有了spa的应用，就是前端路由，vue-route是目前比较流行的一种基于前端路由原理的插件hash模式。哈希模式主要是基于监听浏览器哈希值的变化，并做出相应的动作。hash值在url后面#用过vue的一定对那一块很熟悉，如下图，我们打开下面的控制台//在控制台输入这句话定义hashchangewindow.onhashchange的回调事件=()=>{console.log(1)}定义了这个事件之后，当我们浏览器的hash值发生变化时，控制台会打印一个1，我们来实验一下。//假设我们定义了一个路径，叫做routelocation.hash='/route'，效果如下说到这里，剩下的就很简单了。对于hash方式的前端路由，我们只需要在hash发生变化的时候，在页面的根节点渲染我们想要的HTML即可。一个hash模式路由的简单实现首先假设我们有一个div作为根节点，然后他有一个id叫app，我们写一个路由类让他监听hash//获取这个appconst_EL=document.querySelector('#app');classHashRouter{constructor(routeList){this.routeList=routeList;window.addEventListener('hashchange',e=>{});}}然后页面有变化需要重新渲染//Rendermethodrender(routePath){//获取组件let{component}=this.list.find(el=>el.path==路线路径）；if(!component)return//rendering_EL.innerText=component;}然后我们获取当前的hash，有变化的时候调用渲染函数//这个和onhashchange一样，感觉这样写会优雅一点window.addEventListener('hashchange',e=>{this.reSetRender();});//渲染当前组件reSetRender(){letpath=location.hash.slice(1)||'/'this.render(path)}最后实现公共的apipush(routePath){location.hash=routePath;}替换（路径）{让href=window.location.href;让url=href.split('#')[0];location.replace(`${url}#${path}`);}go(n){history.go(n);}这个hash模式的路由简单实现//假装这里是一个路由数组配置constrouteList=[XXXXXX.....]const$router=newHashRouter(路线清单）；一个历史模式路由的简单实现History对象是浏览器历史栈的一个接口，是与浏览器的历史栈操作相关的API，在window对象上有一个onpopstate事件。当历史堆栈发生变化时会触发此事件。这个事件在微信小程序的H中。5有时候很有用。不能刷新微信小程序中的H5，然后左上角的返回按钮，可以通过这个事件进行一些操作。注意这个onpopstate事件不会在你手动更改历史的时候被触发，它只会在浏览器自己做出动作时才会被触发，比如pushState()。该方法会响应浏览器，但不会触发事件。history模式路由代码的实现与上面的hash实现类似。不同的是需要在pushState和replaceState方法中手动调用渲染函数，具体代码如下//在构造函数中监听popstate事件window.addEventListener('popstate',e\=>{this.handler();});//api实现push(path){history.pushState(null,null,path);this.reSetRender();}replace(path){history.replaceState(null,null,path);this.reSetRender();}go(num){window.history.go(num);}历史模式访问真实路由地址。如果没有配置，刷新的时候会报404so。一个简单的路由就完成了。喜欢就点个赞吧
