前端路由

文章目录

• 一.前端路由阶段
• • • 1. 单页面富应用阶段
    • 2.URL的hash操作
    • 3.URL
    • 4.history模式
• 二.history 和 hash 两种模式的区别
• • 参考文献

---

一.前端路由阶段

• 有了 Ajax 的出现，就有了前后端分离的开发模式
• 后端只提供 API 来返回数据，前端通过 Ajax 获得数据，并通过 JS 来渲染界面

---

1. 单页面富应用阶段

• 其实 SPA 最主要的特点，就是在前后端分离的基础上，加上了一层前端路由。
• 也就是前端来维护的一套 路由规则。
• 前端路由的核心，就是改变 URL ，但是页面不进行整体更新。

---

2.URL的hash操作

如何在更改 URL 后，页面不进行刷新呢?

• 一个是直接改变 URL 里的 hash 属性
• 改变 html5 的 history 模式 ，但是页面不刷新

---

3.URL

location.hash "aaa" // 这样的话，页面不会整体更新

通过这种方式，我们可以通过 location.hash 来进行更改前端路由，而不发送 Http 请求。

---

4.history模式

这种模式下，是使用 栈 结构。

history.pushState({},"","home") // 第一个是data，第二个参数是 title，第三个是 url

---

使用如下命令，可以让 栈 还原回来

history.back()

• 路由器上显示的一定是栈顶的东西
• 可以使用 pushState 和 back 这两种方法，实现出栈和入栈，和点击路由器的 前进 和 后退 的按钮一样。

---

除了使用 压栈 和出栈 的操作，还可以使用 history.replaceState() 这种方法。这种方法，不能点击返回的。

• 使用 go 直接跳到栈的某个位置
• 执行 go(-1) 等同于 history.back() ， 路由调到倒数第二地方。如果是 -2 就弹出两个
• go(1) 直接跳到前一个。
• history.forward(),等价于 history.go（1）

---

二.history 和 hash 两种模式的区别

mode:"hash",
mode:"history",

hash 和 history 都可以，除非你更在一颜值, #括号，夹杂修改后# 后面，会让 url 同文档的 url

• pushState() 设置的新的 url 可以的。

• hash 在比如 http://www.aaa.com/#/hellow ，其中#/hellow 。他的特点，hash 值虽然出现在了url 中，但不会被包含在 HTTP请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

• 用了 HTML5 history Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
  这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

• 在 hash 模式下，前端路由修改的是 # 中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。

---

参考文献

https://segmentfault.com/a/1190000019410139?utm_source=tag-newest