vue两种路由模式及原理
2021-06-10 本文已影响0人
3e2235c61b99
hash模式
vue-router默认的是hash模式.
hash模式,是指url尾巴后的#号以及后面的字符.hash也被称为锚点,本身是用来做页面定位的.
hash虽然出现在url中,但不会被包括在http请求中,对后端完全没有影响,因此改变hash值不会重新加载页面.
hash值的变化不会导致浏览器向服务器发出请求,而hash改变会触发hashchange
事件(只改变#后面的url片段);hash发生变化url都会被浏览器记录下来,从而可以使用浏览器的前进和后退
对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:
HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由
history模式
history模主要是通过history
Api的pushState()
和replaceState()
两个方法来实现的.pushState()
可以改变url地址且不会发送请求,replaceState()
可以读取历史记录栈,还可以对浏览器记录进行修改
以上两个方法可以修改历史状态,下面三个方法可以切换(定位)历史状态
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
history和hash的差异
- history和hash都是利用浏览器的两种特性实现前端路由,history是利用浏览历史记录栈的API实现,hash是监听location对象hash值变化事件来实现
- history的url没有’#'号,hash反之
- history修改的url可以是同域的任意url,hash是同文档的url
- 相同的url,history会触发添加到浏览器历史记录栈中,hash不会触发。
history和hash的优点和缺点
- history比hash的url美观(没有’#'号)
- history修改的url可以是同域的任意url,hash则只能是同文档的url
- history模式往往需要后端支持,如果后端nginx没有覆盖路由地址,就会返回404,hash因为是同文档的url,即使后端没有覆盖路由地址,也不会返回404
- hash模式下,如果把url作为参数传后端,那么后端会直接从’#‘号截断,只处理’#'号前的url,因此会存在#后的参数内容丢失的问题,不过这个问题hash模式下也有解决的方法。