路由的hash和history模式的区别及说明

前言

为了构建 SPA（单页面应用）即不刷新整体页面，通过地址栏中的变化来实现单页面的切换等功能。

Vue-Router 用了两种模式来实现： hash 模式和 history 模式。 默认的路由模式是 hash 模式。

注：hash 模式和 history 模式都属于浏览器自身的特性， Vue-Router只是利用了这两个特性

来实现前端路由和页面的关联。

hash 模式和 history 模式最直观的区别就是-----hash路由带#号，history路由不带#号。

hash模式

hash 模式是开发中默认的模式， 它的 URL 带着一个#， 例如： http://www.csy.com/#/vue， 它的 hash 值就是#/vue。

特点：

• 当URL中的hash值发生改变时，浏览器不会向后端发送http请求；
• 页面不会重新加载

这种模式的浏览器支持度很好， 低版本的 IE 浏览器也支持这种模式。

hash模式原理

通过监听hashChange事件进行页面定位，渲染不同的内容;

window.onhashchange = function(event){// 点击游览器前进后退按钮时会触发
    console.log(event.oldURL,event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

使用 onhashchange()事件的好处就是， 在页面的 hash 值发生变化时，无需向后端发起请求， window 就可以监听事件的改变， 并按规则加载相应的代码。

除此之外， hash 值变化对应的 URL 都会被浏览器记录下来， 这样浏览器就能实现页面的前进和后退。

虽然是没有请求后端服务器， 但是页面的 hash 值和对应的 URL 关联起来了。

history模式

history 模式的 URL 中没有#， 它使用的是传统的路由分发模式， 即用户在输入一个 URL 时， 服务器会接收这个请求， 并解析这个URL， 然后做出相应的逻辑处理。

它通过HTML5 History API 提供的 history.pushState方法或者 history.replaceState 方法，监听popstate事件，需要客户端和服务端共同的支持。

pushState() 和 replaceState() 方法， 这两个方法应用于浏览器的历史记录栈， 提供了对历史记录进行修改的功能。 只是当他们进行修改时， 虽然修改了 url， 但浏览器不会立即向后端发送请求。 

切换历史状态： 包括 forward()、 back()、 go()三个方法， 对应浏览器的前进， 后退， 跳转操作

注：

• history 模式下刷新页面请求后端是时
• 如果后端没有相应的路由或资源就会出现404

此为前端配置

export default new Router({
    mode: 'history',
    // mode: 'hash',  //默认hash模式
    routes
})

总结

1、hash模式带#号比较丑，history模式比较优雅；

2、pushState设置的新的URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL；

3、pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置 的新值必须与原来不一样才会触发记录添加到栈中；

4、pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串；

5、pushState可额外设置title属性供后续使用；

6、history 模式下刷新页面请求后端是时，如果后端没有相应的路由或资源就会出现404。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论