美文网首页
VueRouter中hash和history模式的原理

VueRouter中hash和history模式的原理

作者: 杭州程序员小陈 | 来源:发表于2021-07-08 09:23 被阅读0次

hash模式

  1. hash 模式的路由中带有 # 号

  2. hash 模式通过 window.onhashchange 方法监听路由的修改

  3. hash 模式在页面刷新的时候,发送的请求 url 是不带 # 后面的内容的

  4. hash 模式可以兼容部分低版本的浏览器

  5. hash 模式打包后,直接在浏览器中打开 /dist/index.html 可以正常的访问(原因是第 3 条指出的原因)

history模式

  1. history 模式是使用正常的 url 路径显示

  2. history 模式通过 pushState 和 replaceState 方式修改路由改变

  3. history 模式在页面刷新的时候,会请求当前地址栏中完成的 url,这时需要服务器对这个 url 有处理,如果没有对应的文件,需要返回 index.html

  4. history 模式因为是使用的 HTML5 的新规范,所以不能兼容低版本的浏览器

  5. history 模式打包后,直接在浏览器中打开 /dist/index.html 会报错(原因是第 3 条指出的原因)

其他注意事向

有些 App 的分享是不支持 # 的,所以不能使用 hash 模式

总结

image

相关文章

网友评论

      本文标题:VueRouter中hash和history模式的原理

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