美文网首页
Vue-router 中hash模式和history模式的区别

Vue-router 中hash模式和history模式的区别

作者: love_peaches | 来源:发表于2021-03-04 15:01 被阅读0次

    hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。那么什么时候要用history模式呢?如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传。当然其功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok啦。

    原文链接:https://blog.csdn.net/fifteen718/article/details/82529433

    下面具体说下hash 以及 history 模式加深记忆:

    一 ,hash

    路由的哈希模式其实是利用了window可以监听onhashchange事件,也就是说你的url中的哈希值(#后面的值)如果有变化,前端是可以做到监听并做一些响应(搞点事情),这么一来,即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。

    二,history

    HTML5新推出的API :pushState与replaceState
    作用就是可以将url替换并且不刷新页面,http并没有去请求服务器该路径下的资源,一旦刷新就会显示404。

    解决办法

    history模式下刷新报404的弊端呢?
    需要服务器端操作,将不存在的路径请求重定向到入口文件(index.html)

    相关文章

      网友评论

          本文标题:Vue-router 中hash模式和history模式的区别

          本文链接:https://www.haomeiwen.com/subject/aglkqltx.html