位置: IT常识 - 正文
VueRouter的两种模式(vuerouter模块化)
编辑：rootadmin推荐整理分享VueRouter的两种模式(vuerouter模块化)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue router mode区别,vuerouter原理,vuerouter原理,vuerouter用法,vuerouter的原理,vuerouter模块化,vuerouter模块化,简述vuerouter,内容如对您有帮助，希望把文章链接给更多的朋友！
前后端分离：利用Ajax，可以在不刷新浏览器的情况下异步数据请求交互。
前端路由：匹配不同的url路径，进行解析，加载不同组件，动态渲染内容，不会向后端发出请求。（VueRouter）
单页应用SPA（只有一个html文件），页面交互和页面刷新都是无刷新的。前后端分离+前端路由来实现。
VueRouter有两种模式：Hash模式、History模式，默认是Hash模式，可以通过mode属性进行设置。
modehistory对象创建依据的类hashnew HashHistory(this, options.base, this.fallback)historynew HTML5History(this, options.base)abstractnew AbstractHistory(this, options.base)一、Hash模式Hash模式是VueRouter的默认模式，工作原理是利用hashchange事件监听hash的变化，即#xxx，然后通过。可以在window对象上监听这个事件。
window.onhashchange = function(event){ // event.oldURL 表示原来的URL，有#则含#及其后字符串 // event.newURL 表示现在的URL，有#则含#及其后字符串}HashHistory构造函数：
HashHistory.push() // 将新路由添加到浏览器历史访问栈
HashHistory.replace() // 将浏览器历史访问栈栈顶路由替换成新路由
由于hash变化的URL都被记录在浏览器历史访问栈，尽管浏览器没有访问服务器，但页面内容和URL一一对应，可以使用浏览器的前进和后退功能。
触发hashchange事件的几种情况如下：
1. 浏览器的前进、后退操作会触发window.location.hash的变化，从而触发hashchange事件。
2. 当只改变浏览器地址栏URL的哈希值，此时回车，浏览器不会发送任何请求给服务器，只会触发hashchange事件。
3. 当在浏览器地址栏URL中输入一个包含hash的url，此时回车，浏览器会发送除hash外的地址请求给服务器，请求完成，设置hash值，触发hashchange事件。
4. 标签<a>的href属性可以设置为页面某元素的ID（如#top），点击跳转到该ID元素所在区域，同时浏览器自动设置window.location.hash属性，地址中的hash也会变化成其ID（如#top），触发hashchange事件。
二、History模式Hash模式的缺点：
1. hash本来用于做页面定位，若用来做路由，原锚点公共失效。
2. Hash模式的传参基于url，若有复杂的数据会有体积的限制。History模式除了可以利用url传参，还可以将数据存放一个特定的对象中。
3. 路径书写不简约。
History模式的书写更加简洁，去掉#。充分利用HTML5 History Interface中新增的pushState()和replaceState()方法，这俩个方法应用于浏览器的历史记录栈（window.history指向History对象，表示当前窗口的浏览历史），使得不刷新页面改变url地址。在已有的back()、forward()、go()（接受一个整数作为参数，若参数超过实际存在的网址范围，该范围无效果；若不指定参数，默认参数为0，相当于刷新页面）的基础上，提供了对历史记录修改的功能。
前进和后退操作时都不会请求服务器，而是通过popstate事件监听，刷新页面才会向服务器发起请求。
2.1 History.pushSate()用于在浏览器历史访问栈中添加一条记录，该方法不会刷新页面，只是导致History对象发生变化，地址栏会发生变化。使用该方法后，可以用History.state读出状态对象。
History.pushSate(object, title, url)
object：一个对象，通过pushState方法可以将该对象内容传递到新页面中，若不需要，填null。
title：标题，几乎没有浏览器支持该参数，传一个空字符串。
url：新的网站，需与当前页面处于同一个域。不指定默认为当前地址。若设置跨域地址，会报错。
若在url中设置#xxx，不会触发hashchange事件。
2.2 History.replaceSate()用于修改History对象的当前记录，用法同History.pushSate(object, title, url)。
2.3 popstate事件仅仅调用pushSate()或replaceState()方法，不会触发该事件。
只有用户点击浏览器前进和后退，或使用脚本调用history.back()、history.forward()、history.go()方法才会触发popstate事件。
该事件仅针对同一个文档，若浏览历史的切换，导致加载不同的文档，该事件也不会触发。
第一次加载不会触发popstate事件。
其回调函数的参数为event对象，state属性指向pushSate()和replaceState()方法提供的History的当前对象，也可以通过history.state获得该对象。
当页面刷新时，需要向服务器发起请求。History模式的url会全部传给服务器，即服务器需要匹配完成的URL，否则报404错误，需要后端配置路由。Hash模式的url的哈希值不会携带在请求中。
三、使用路由模块实现页面跳转的方式1. 修改地址栏
2. this.$router.push('路由地址')
3. <router-link to="路由地址"></router-link>
四、Hash模式和History模式的相同点和不同点相同点：
1. 都是VueRouter的模式配置选项。
2. 都可以用作SPA（单页面应用）的实现，实现前端路由，不向服务器发起请求，动态渲染页面。
不同点：
1. Hash模式需要#xxx（哈希值），History模式书写更简约。
2. Hash模式是通过window对象监听hashchange事件，根据hash值的变化来动态渲染页面的；History模式是通过window对象监听popstate事件，当浏览器前进和后退时，获取当前history对象状态即history.state来动态渲染组件。
3. Hash模式创建history对象是依赖HashHistory构造函数；History模式创建history对象是依赖HTML5History构造函数。
Hash模式利用HashHistory.push()和HashHistory.replace()可以将hash变化的URL都被记录在浏览器历史访问栈，实现页面内容和URL一一对应，从而可以使用浏览器的前进和后退功能。
History模式利用HTML5History.pushState()和HTML5History.replaceState()修改页面的url地址，修改history对象的状态，而不刷新页面。
4. Hash模式通过携带在url中传递参数；History模式既可以通过携带在url中传递参数，也可以将数据存放在一个特定的对象中。
5. Hash模式只有hash值设置为不同于上次时，才会被添加进历史记录栈；History模式可以记录相同的url。
6. Hash模式只能修改#之后的部分；History模式的pushState设置的新的url可以是于当前url同源的任意url。
上一篇：Boundary Loss 原理与代码解析(bounded linear functional)
下一篇：python机器人编程——差速机器人小车的控制，控制模型、轨迹跟踪，轨迹规划、自动泊车（上）(python机器人编程控制)
