1. 前端路由启蒙
什么是路由呢？
答：路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动。(维基百科)
我们每个人上网都会接触到路由器和光猫(调制解调器，虚拟信号变成数字信号，数字变成虚拟信号)
简单来说如果家中有一个人以上人上网就会用到路由器，路由器的作用就是分发请求
只要是分发请求都可以叫做路由
那么前端的路由是指什么呢？
我们在浏览网页的时候经常切换页面，如果每个页面都是一个div，如何知道用户要使用那个页面呢？那就是用网址
举个例子： 有网址
http://127.00.1/#1 代表展示div1
http://127.00.1/#2 代表展示div2
http://127.00.1/#3 代表展示div3
http://127.00.1/#4 代表展示div4
怎么在一个页面通过URL的不同切换展示内容(这里用div代替)
<div id="app"></div>
<div id="div1" style="display: none">
1
</div>
<div id="div2" style="display: none">
2
</div>
<div id="div3" style="display: none">
3
</div>
<div id="div4" style="display: none">
4
</div>
const number = window.location.hash.substr(1)
// window.location.hash 是包含块标识符的DOMString，开头有一个“#”
const div = document.querySelector(`#div${number}`)
const app = document.querySelector('#app')
div.style.display = 'block'
app.appendChild(div)
这样在本地预览网址后加入/#1,便会展示div1，其余同理
我想通过a标签点击切换显示内容呢
<!-- hashchange event 当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号 -->
<a href="#1">go to 1</a><br>
<a href="#2">go to 2</a><br>
<a href="#3">go to 3</a><br>
<a href="#4">go to 4</a>
<div id="app"></div>
<div id="div1" style="display: none">
1
</div>
<div id="div2" style="display: none">
2
</div>
<div id="div3" style="display: none">
3
</div>
<div id="div4" style="display: none">
4
</div>
let number = window.location.hash.substr(1)
const div = document.querySelector(`#div${number}`)
const app = document.querySelector('#app')
div.style.display = 'block'
app.appendChild(div)
window.addEventListener('hashchange', () => {
number = window.location.hash.substr(1)
const div = document.querySelector(`#div${number}`)
const app = document.querySelector('#app')
app.children[0].style.display = 'none'
document.body.appendChild(app.children[0])
div.style.display = 'block'
app.appendChild(div)
})
这样便实现了一个简单的路由跳转，但是有一个bug，用户没有输入 #1 的时候会把报错
默认路由
let number = window.location.hash.substr(1)
number = number || 1 // 给个默认值 即默认路由
但是当我输入的值不是# 1~4 的时候 又报错了
保底路由(404路由)
let div2 = document.querySelector(`#div${number2}`)
if (div2) {
div2.style.display = 'block'
} else { // 如果没有现存的页面 就显示404
div2 = document.querySelector('#div404')
div2.style.display = 'block'
}
优化一下代码
function route() {
let number = window.location.hash.substr(1)
let app = document.querySelector('#app')
number = number || 1 // 默认路由
// 获取界面
let div = document.querySelector(`#div${number}`)
// 渲染界面
if (!div) { // 如过输入正确的hash
div = document.querySelector('#div404')
}
div.style.display = 'block'
// 展示界面
if (app.children.length > 0) {
app.children[0].style.display = 'none'
document.body.appendChild(app.children[0])
}
app.appendChild(div)
}
route() // 初次进入，执行路由
// 用户改变URL中hash事件
window.addEventListener('hashchange', () => {
console.log('hash变了')
route() // 用户点击，执行路由
})
2. 路由表
上面对的代码虽然实现了最简单的路由，但是还是有待改善
let number = window.location.hash.substr(1)
let app = document.querySelector('#app')
number = number || 1 // 默认路由
// 获取界面
let div = document.querySelector(`#div${number}`) // 这里我们hash与div的对应关系过于单一，这种对应关系应该是我们可以改变的才更好
我们可以创建一个路由表
const div1 = document.createElement('div')
div1.innerHTML = '1'
const div2 = document.createElement('div')
div2.innerHTML = '2'
const div3 = document.createElement('div')
div3.innerHTML = '3'
const div4 = document.createElement('div')
div4.innerHTML = '4'
const routeTable = { // 路由表
'1': div1,
'2': div2,
'3': div3,
'4': div4,
}
let div = routeTable[number.toString()] // 根据hash对应路由
3. hash模式 history模式 memory模式区别
- hash：上面的实现便是一种hash模式的路由，任何情况下，都可以使用hash模式作为前端的路由，缺点是SEO不友好，因为服务器收不到hash，浏览器不会把#后面的内容发给服务器的
- history：如果后端能将所有前端路由都渲染到同一个页面(不能是404页面)的时候就可以使用history模式，缺点IE8以下不支持
// history 模式
const routeTable = { // 路由表
'/1': div1,
'/2': div2,
'/3': div3,
'/4': div4,
}
let number = window.location.pathname // JS只需该这两处即可
<a href="/1">go to 1</a><br>
<a href="/2">go to 2</a><br>
<a href="/3">go to 3</a><br>
<a href="/4">go to 4</a> <!-- a标签改成跳转/ -->
但是这样会发现页面在跳转时会刷新，用户体验不好
const allA = document.querySelectorAll('.link') //获取页面a标签
for (let taga of allA) {
taga.addEventListener('click', (e) => {
e.preventDefault() // 组织默认事件
const href = taga.getAttribute('href')
window.history.pushState(null, 'page 2', href)
// 通知
onStateChange(href) // 触发事件
})
}
route(app)
function onStateChange() { // 自定义history变化事件
console.log('state变了')
route(app)
}
这样便可以实现history模式的路由了
- memory模式：它的特点是页面信息不在URL后面显示，适合App页面的跳转，reactNative等，缺点没有URL不能分享链接(单机版)
let number = window.localStorage.getItem('xxx') //这里使用localStorage存储跳转信息
const allA = document.querySelectorAll('.link') //获取页面a标签
for (let taga of allA) {
taga.addEventListener('click', (e) => {
e.preventDefault()
const href = taga.getAttribute('href')
window.localStorage.setItem('xxx',href)
// 通知
onStateChange(href)
})
}
