vue-router路由模式详解(总结)

一、路由模式分析

要说vue-router的路由模式，首先要了解的是路由是由多个URL组成的，不同的URL可以相应地导航到不同的位置。

如果你已经开发了一个服务器或者对http协议有所了解，你就会知道浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时会重新请求。vue和vue-router开发的实际使用会显示，切换页面时没有重新请求，就好像页面是有状态的一样。原因是什么？

其实这是通过浏览器的History API来实现的，这样页面可以不刷新就跳转，页面的状态也可以在浏览器中维护。

默认情况下，vue-router使用哈希模式，即出现以下网址：

，带#号的网址

我们可以使用以下代码将其修改为历史模式：

从“vue”导入Vue从“vue-router”导入Router“import Main from”@/components/Main ' Vue . use(Router)导出默认新路由器({mode :' history '，routes : [{path :'/'，component : main}]})，此URL中的#号将被删除。

实际上有三种模式：

Hash:使用URL的哈希值作为路由。支持所有浏览器。

HTML5历史API和自历史：以来的服务器配置。参考官网HTML5历史模式

摘要：支持所有javascript运行模式。如果发现没有浏览器API，路由会自动强制进入此模式。

二、两种模式的区别

1.哈希模式

哈希模式背后的原理是onhashchange事件，可以在窗口对象上监控该事件：

window . onhashchange=function(event){ console . log(event . old URL，event . new URL)；让hash=location . hash . slice(1)；document . body . style . color=hash；}上面的代码可以通过改变哈希来改变页面的字体颜色。虽然没用，但在一定程度上说明了原理。

更重要的是，因为哈希发生变化的URL会被浏览器记录下来，你会发现浏览器可以用来前后移动，当你点击后退时，页面的字体颜色也会发生变化。这样，虽然浏览器没有请求服务器，但是页面状态和url是一一关联的。后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用的标准。

让我们写一个简单的方法来测试它

！doctype html lang=' en ' head meta charset=' utf-8 ' title document/title/head body div test/div script type=' text/JavaScript ' window . onhashchange=function(event){ console . log(event . old URL，event.newURL)让hash=location . hash . slice(1)；document . body . style . color=hash；}/脚本/正文/html

并且可以通过浏览器改变前进和后退页面。

网易云音乐，百度网盘采用哈希路由，看样子是这样的：

http://music . 163.com/#/friend https://pan . Baidu.com/disk/home # list/vmode=list

2.历史路由

随着历史api的到来，前端路由开始演进。在前面的hashchange中，您只能在#之后更改url片段，而history api给了前端完全的自由

历史api可以分为两部分：切换和修改

(1)切换历史状态

包括后退、前进、go方法，对应浏览器的前进、后退、跳转操作，有同学说(谷歌)浏览器只有前进和后退，没有跳转。嗯，如果你长按鼠标后移，所有当前窗口的历史都会出来，这样你就可以跳转了(叫跳转可能更合适):

history . go(-2)；//回去两次(2)；//往前走两次history . back()；//back history . forward()；//转发(2)修改历史状态

包括两个方法，pushState和replaceState，它们接收三个参数：stateObj、title和url

history . PushState({ color : ' red ' }，' red '，' red ')window . onOpstate=function(event){ console . log(event . state)if(event . state event . state . color===' red '){ document . body . style . color=' red '；} } history . back()；history . forward()；通过pushstate将页面状态保存在state对象中。当页面的url变回这个url时，可以通过event.state检索state对象，这样就可以恢复页面状态。这里，页面状态是页面字体颜色。事实上，滚动条的位置、阅读进度和组件切换的页面状态都可以存储在状态中。

通过历史api，我们失去了丑#，但它也有一个问题：

不怕往前走，不怕往后走，就是怕刷新，f5，(如果后端没有准备好)，因为刷新其实就是请求服务器。

在哈希模式下，前端路由修改#中的信息，但浏览器请求时没有修改，所以没有问题。但是，在历史下，您可以自由修改路径。刷新时，如果服务器中没有相应的响应或资源，每分钟就会刷出一个404。

(3)popstate拦截历史路由并监视页面返回的事件

当活动历史条目改变时，popstate事件被触发。

1.如果激活的历史条目是通过调用history.pushState()创建的，或者受到调用history.replaceState()的影响，则popState事件的State属性包含历史条目的state对象的副本。

2.需要注意的是，调用history.pushState()或history.replaceState()用于在浏览历史中添加或修改记录，不会触发popstate事件；

此事件仅在进行浏览器操作时触发，例如用户单击浏览器的后退按钮(或在Javascript代码中调用history.back()

让我们测试一下：

！doctype html lang=' en ' head meta charset=' utf-8 ' title document/title/head body div test/div script type=' text/JavaScript ' if(window . history window . history . pushstate){ window . onopstate=function(event){ console . log(' location : ' document . location '，state : ' JSON . stringify(event . state))；//window . history . go(1)//window . history . back()}；//window . addeventlistener(' pop state '，函数(e){//window . location=' http://www . Baidu.com '；//}，false)；function(){ var state={ title : ' title '，URL : ' # ' }；window.history.pushState(state，‘title’，“#”)；}();}/script/body/html/html刷新时不打印，刷新几次，然后每次都后退一步，直到为空

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。