位置: IT常识 - 正文

VueRouter的两种模式(vuerouter模块化)

编辑：rootadmin

VueRouter的两种模式

推荐整理分享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)