zoukankan      html  css  js  c++  java
  • VUE hash路由和history路由的区别

    1.hash路由在地址栏URL上有#,用 window.location.hash 读取。而history路由没有会好看一点
    2.我们进行回车刷新操作,hash路由会加载到地址栏对应的页面,而history路由一般就404报错了(刷新是网络请求,没有后端准备时会报错)。
    3.hash路由支持低版本的浏览器,而history路由是HTML5新增的API。
    4.hash的特点在于它虽然出现在了URL中,但是不包括在http请求中,所以对于后端是没有一点影响的,所以改变hash不会重新加载页面,所以这也是单页面应用的必备。
    5.history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法,它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。
    6.history的这种模式需要后台配置支持。比如:当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404

    总结

    当然history也不是样样都好。SPA虽然在浏览器里游刃有余,单真要通过URL向后端发起HTTP请求时,两者的差异就来了。尤其在用户手动输入URL后回车,或者刷新(重启)浏览器的时候。
    1:hash 模式下,仅hash符号之前的内容会被包含在请求中,如http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。
    2:history模式下,前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理,将返回404错误

    问题解决:
    出现404错误的解决办法:网上介绍的很多方法都不行。安装URL重写模块,配置重写规则,统一指向index.html.或者直接把url重写生成的web.config文件直接放置到网站根目录下即可。


    分享到:
  • 相关阅读:
    Kotlin使用常见问题汇总
    浅谈Kotlin(五): 静态变量&静态方法
    浅谈Kotlin(八):空安全、空类型
    浅谈Kotlin(七):lateinit、by lazy 使用
    浅谈Kotlin(六):data class的使用
    实例:([Flappy Bird Qlearning]
    强化学习之MountainCarContinuous(注册自己的gym环境)
    seq2seq之双向解码
    AwesomeVisualCaptioning
    VUE hash路由和history路由的区别
  • 原文地址:https://www.cnblogs.com/qqflying/p/15546977.html
Copyright © 2011-2022 走看看