vue router的hash和history,vue-router hash和history

　　本文主要介绍了Vue中路由器路由的两种模式，并对hash模式和history模式做了简要分析，有需要的朋友可以借鉴，希望能有所帮助。

hash 模式 (默认)

　　工作原理：监控网页-onHashChange事件哈希值的变化，得到location.hash

　　使用URL的散列来模拟一个完整的URL，这样当URL改变时，页面将不会被重新加载。

　　它会给用户跳转到网页的感觉，但实际上并没有跳转。

　　主要用于单页的应用(SPA)

　　//模拟原理

　　//监控页面哈希值的变化

　　window . onhashchange=function(){

　　//获取当前url的哈希值

　　const _hash=location .哈希

　　//根据不同的哈希值显示不同的内容

　　开关(_哈希){

　　案例“/#a”:

　　document . query selector(# app)。innerhtml= H1我是第1页内容/h1

　　打破；

　　案例“/#b”:

　　document . query selector(# app)。innerhtml= H1我是第2页内容/h1

　　打破；

　　案例“/#c”:

　　document . query selector(# app)。innerhtml= H1我是第3页内容/h1

　　打破；

　　}

　　}

history 模式

　　工作原理：history.pushState() API主要用于在不刷新页面的情况下改变网址。

　　事实上，有五种模式可以在不刷新页面的情况下更改URL。

　　history.pushState()

　　history.replaceState()

　　history.go()

　　History.back() -相当于history.go(-1)

　　History.forward() -相当于history.go(1)

　　需要后台配置支持。如果输入一个不存在的url，需要后端配置做“底层配置”。不是大致回到404，而是回到首页。

　　打开历史模式。

　　const router=new VueRouter({

　　模式：“历史”，

　　路线：[.]

　　})

　　以上是Vue中两种路由器路由模式的hash和历史的详细内容。更多关于Vue中路由器路由模式的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。