vue路由中hash和history模式的区别

79 篇文章 1 订阅
59 篇文章 1 订阅

Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。

1、hash模式

hash模式是开发中默认的模式,也称作锚点,它的URL带着一个#,例如:www.abc.com/#/vue,它的hash值就是#/vue。

特点:

  • hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端没有影响。所以改变hash值不会重新加载页面。
  • 这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。
  • hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。

原理:

hash模式的主要原理就是onhashchange()事件:

window.onhashchange = function(event){
	console.log(event.oldURL, event.newURL);
	let hash = location.hash.slice(1);
}

使用onhashchange()事件的好处就是,在页面的hash值发生变化时,无需向后端发起请求,window就可以监听事件的改变,并按规则加载相应的代码。除此之外,hash值变化对应的URL都会被浏览器记录下来,这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器,但是页面的hash值和对应的URL关联起来了。

获取页面hash变化的方法:

(1)监听$route的变化:

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

(2)通过window.location.hash读取#值:
window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。

2、history模式

history模式直接指向history对象,它表示当前窗口的浏览历史,history对象保存了当前窗口访问过的所有页面网址。URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。

特点:

  • 当使用history模式时,URL就像这样:hhh.com/user/id。相比hash模式更加好看。
  • 虽然history模式不需要#。但是,它也有自己的缺点,就是在刷新页面的时候,如果没有相应的路由或资源,就会刷出404来。

history api可以分为两大部分,切换历史状态修改历史状态

修改历史状态:
包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法,这两个方法应用于浏览器的历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修改时,虽然修改了url,但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果,就需要前端用上这两个API。

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

配置:

想要设置成history模式,就要进行以下的配置(后端也要进行配置):

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

3、两者对比

调用 history.pushState() 相比于直接修改 hash,存在以下优势:

  • pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL。
  • pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。
  • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串。
  • pushState() 可额外设置 title 属性供后续使用。
  • hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误;history模式下,前端的url必须和实际向后端发起请求的url一致,如果没有对用的路由处理,将返回404错误。

4、总结

  • hash模式URL上带有#,仅 hash 符号之前的内容会被包含在请求中,如 www.hhh.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
  • hash模式URL上没有#,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 www.hhh.com/user/id。如果后端缺少对 /use/id 的路由处理,将返回 404 错误。
  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值