前端路由hash和history的区别

545 阅读3分钟

传统路由与前端路由

  1. 传统的路由:当用户访问一个url时,对应的服务器会接收这个请求,然后解析url中的路径,从而执行对应的处理逻辑。这样就完成了一次路由分发,每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,叫做多页应用。
  2. 前端路由:不涉及服务器,是前端利用hash或者HTML5的history API来实现的,一般用于不同内容的展示和切换。用js动态的将当前页面的内容清除掉,然后将下一个页面的内容挂载到当前页面上,这个时候的路由不是后端来做了,而是前端来做,判断页面到底是显示哪个组件,清除不需要的,显示需要的组件。这种过程就是单页应用,每次跳转的时候不需要再请求html文件了。 “更新视图但不重新请求页面”是前端路由原理的核心之一 vue-router 提供了三种运行模式 • hash • history • abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端 hash模式
  3. hash 模式的路由中带有 # 号
  4. hash 模式通过 window.onhashchange 方法监听路由的修改,也就是说url中的哈希值(#后面的值)如果有变化,前端是可以做到监听并做一些响应,所以即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。
  5. hash 模式可以兼容部分低版本的浏览器
  6. hash 模式在页面刷新的时候,发送的请求 url 是不带 # 后面的内容的,仅 hash 符号之前的内容会被包含在请求中,如 www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。 history模式
  7. history 模式是使用正常的 url 路径显示
  8. history 模式通过 pushState 和 replaceState 方式修改路由改变。这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
  9. history 模式因为是使用的 HTML5 的新规范,所以不能兼容低版本的浏览器
  10. history 模式在页面刷新的时候,会请求当前地址栏中完整的 url,前端的 URL 必须和实际向后端发起请求的 URL 一致,如www.baidu.com/a/ ,如果后端缺少对/a的处理,将返回404错误。所以,在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面。” MDN中调用 history.pushState() 相比于直接修改 hash,存在以下优势: • pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中; • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串;