vueRouter的实现原理

vueRouter是前端路由,当路径切换的时候在浏览器端判断当前路径,并加载当前路径对应的组件,它有两种模式:一种是Hash模式,一种是History模式

Hash模式:是以url中#后面的内容作为路由地址,可以直接通过location.url来切换浏览器的地址,如果只改变了#后面的内容,浏览器不会向服务器请求这个地址,但是会把这个地址记录在浏览器的访问记录中,当hash改变后,要监听hash的变化,并做相应的处理,我们可以监听hashchange事件,当hash发生变化时,会触发hashchange事件,在hashchange事件中记录当前路由地址,并找到当前路由对应的组件,重新渲染在浏览器中

History模式:路径就是普通的url,通过history.pushState()方法来改变地址栏,并把当前地址记录在浏览器的访问历史中,并不会真正的跳到指定的路径,也就是浏览器不会向服务器发送请求。通过监听popstate事件,可以监听到浏览器历史操作的变化,在popstate事件中可以记录浏览器地址栏改变后的地址,要注意的是,调用history.pushSate()和history.replaceState()不会触发popstate事件,只有点击浏览器的前进后退按钮及调用history.forward()、history.back()、history.go()方法时才会触发popstate事件。最后通过路由找到对应的组件,渲染在浏览器中

注:vueRouter的history模式并不会向服务器发送请求,是因为vue-cli对history模式做了处理

原文地址:https://www.cnblogs.com/flyingzeng/p/15466613.html