vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 路由的hash和history模式区别

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

作者:Cshaosun

Vue-Router提供了hash模式和history模式两种路由模式,hash模式URL带#,支持低版本IE,history模式URL不带#,需要服务器支持

前言

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

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

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

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

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

hash模式

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

特点:

这种模式的浏览器支持度很好, 低版本的 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()三个方法, 对应浏览器的前进, 后退, 跳转操作

注:

此为前端配置

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。

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

您可能感兴趣的文章:
阅读全文