Front-end routing is divided into two types, one is hash routing in the form of /#/ A /b/ C, and the other is Hostory routing in the form of/A /b/ C, both of which have browser-supported apis. Let’s take a look at their respective knowledge in detail
Hash routing
Hash changes do not refresh the browser. You can run localwind. hash to view the current page hash or run localwind. hash = a to change the current page hash. You can listen for changes to the page hash via window.addeventListener (‘hashchange’,() =>{})
Hash Routing Practice
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<ul>
<li><a href="# /">I am a home page</a></li>
<li><a href="#/a">This is page A</a></li>
<li><a href="#/b">I'm page B</a></li>
</ul>
<script>
class HashRouter{
constructor(){
this.routes = {}
this.currentHash = ' '
const hashChangeUrl = this.hashChangeUrl.bind(this)
window.addEventListener('load', hashChangeUrl, false)
window.addEventListener('hashchange', hashChangeUrl, false)}route(path, callback){
this.routes[path] = callback || function(){}}hashChangeUrl(){
console.log('hashChangeUrl')
this.currentHash = location.hash.slice(1) | |'/'
this.routes[this.currentHash] && this.routes[this.currentHash]()
}
}
const Router = new HashRouter()
const body = document.querySelector('body')
const changeColor = function(color){
body.style.backgroundColor = color
}
Router.route('/'.() = > {
changeColor('red')
})
Router.route('/a'.() = > {
changeColor('green')
})
Router.route('/b'.() = > {
changeColor('#cddc39')})</script>
</body>
</html>
Copy the codeThe history of routing
The history.push() method adds a history to the history stack and changes the history value of the current page. The history.back() method changes the page’s history value. The history.go() method changes the value of history forward or backward The popState event can listen for history changes caused by methods other than push
History Routing Actual Combat
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<ul>
<li><a href="/">I am a home page</a></li>
<li><a href="/a">This is page A</a></li>
<li><a href="/b">I'm page B</a></li>
</ul>
<script>
class HistoryRoutes{
constructor(){
this.routes = []
window.addEventListener('popstate'.(e) = > {
console.log('popstate')
const path = this.getState()
this.routes[path] && this.routes[path]()
})
}
getState(){
const path = window.location.pathname
return path ? path : '/'
}
route(path, callback){
this.routes[path] = callback || function(){}}go(path){
history.pushState(null.null, path)
this.routes[path]()
}
}
const Router = new HistoryRoutes()
const body = document.querySelector('body')
const changeColor = function(color){
body.style.backgroundColor = color
}
Router.route('/'.() = > {
changeColor('red')
})
Router.route('/a'.() = > {
changeColor('green')
})
Router.route('/b'.() = > {
changeColor('#cddc39')})const ul = document.querySelector('ul')
ul.addEventListener('click'.(e) = > {
if(e.target.tagName === 'A'){
e.preventDefault()
Router.go(e.target.getAttribute('href'))}})</script>
</body>
</html>
Copy the code