前端路由
2020-11-04 本文已影响0人
bestCindy
什么是路由呢，路由就是根据不同的 url 地址展现不同的页面或者内容
路由分为两种 hash 模式 和 history 模式
hash 模式
- 这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符
- hash 也 称作 锚点，本身是用来做页面定位的，它可以使对应 id 的元素显示在可视区域内
原理
- 首先需要全局安装 light-server：
yarn global add light-server - 新建
hash.html
<body>
<a href="#/a">A页面</a>
<a href="#/b">B页面</a>
<div id="app"></div>
<script>
function render() {
app.innerHTML = window.location.hash;
};
window.addEventListener("hashchange", render);
render();
</script>
</body>
- 目录下运行
light-server -s . --port 3000 - 打开
http://localhost:3000/hash.html
hash.html
-
点击 “A页面”
优点
- 只有 “#” 符号前面的内容才会包含在请求中被发送给后端，所以就算后端没有对路由全覆盖，也不会出现 404
- hash 值的改变后悔保存在浏览器的 history 中
缺点
- 不太美观
history 模式
history API 是 H5 提供的新特性，允许开发者直接更改前端路由
原理
- 新建
history.html
<body>
<a href="javascript:toA()">A页面</a>
<a href="javascript:toB()">B页面</a>
<a id="app"></a>
<script>
function render() {
app.innerHTML = window.location.pathname
}
function toA() {
history.pushState({}, null, "/a");
render();
}
function toB() {
history.pushState({}, null, "/b");
render();
}
window.addEventListener("popstate", render)
</script>
</body>
- 在目录下运行
light-server -s . --historyindex "/history.html" --port 3000 -
点击 “A页面”
- 一些 history API
history.replaceState({}, null, '/b') // 替换路由history.pushState({}, null, '/a') // 路由压栈history.back() // 返回history.forward() // 前进history.go(-2) // 后退2次
上面代码监听了 popstate 事件，改事件可以监听
- 用户点击浏览器的前进和后退
- 手动调用 history 的
back、forward、go
监听不到 - history 的
pushstate和replacestate
所以上述代码中 toA 和 toB 要手动调用 render
另外，history 模式改变 url 的方式会导致浏览器向服务器发送请求，如果匹配不到任何静态资源，就会返回一个 404
所以，这也是为什么 light-server 命令强制加了一个 history.html，这个参数的意思是如果资源不存在就会返回 history.html 页面的内容
优点
- 相比于 hash 模式，比较美观
- pushState 设置的 url 只能是和当前文档同源的 url
- pushState 设置的 url 与当前的 url 一模一样时，也会添加到浏览器的 history 中，但是 hash 模式， # 后面的内容必须修改才会添加到记录栈中
缺点
- 前端的 url 必须和向发送请求后端 url 保持一致，否则会报 404
原文
前端路由模式详解（hash和history)
https://www.cnblogs.com/ggbondlearn/p/12239651.html
https://juejin.im/post/6844904054087221256
