Router
单页面应用（SPA）需配置Router来解决页面跳转，Vue、React等框架都支持Router配置，路由常分为hash、history两种模式。hash模式URL尾部带有“#”，history模式不带“#”。history模式需要配合服务器的URL重写，否则将出现404。下面使用原生JS实现Router。
路由原理
- Router 注册
1.1 提供注册的URL
1.2 提供回调函数 - URL 跳转模式
2.1 push 跳转
2.2 replace 跳转 - Router 监听
3.1 hashRouter 监听
3.2 historyRouter 监听 - Router 模式
4.1 hashRouter
4.2 historyRouter
路由实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router</title>
</head>
<body>
<!-- push 跳转模式 -->
<ul>
<li onclick="Router.push(baseUrl + '')">首页</li>
<li onclick="Router.push(baseUrl + 'news')">新闻</li>
<li onclick="Router.push(baseUrl + 'products')">产品</li>
</ul>
<!-- replace 跳转模式 -->
<ul>
<li onclick="Router.replace(baseUrl + '')">首页</li>
<li onclick="Router.replace(baseUrl + 'news')">新闻</li>
<li onclick="Router.replace(baseUrl + 'products')">产品</li>
</ul>
<div id="app">
</div>
<script>
var app = document.getElementById("app")
var baseUrl = "/" // 根目录
function RouterClass(options) {
this.routerMap = {} // 用于路由注册
this.curUrl = "" // 当前的url
this.mode = -1
this.modeWhiteList = {
"hash":this.eventHashRouter.bind(this),
"history":this.eventHistoryRouter.bind(this)
}
Object.keys(this.modeWhiteList).forEach((key,index)=>{
if(key === options.mode){
this.mode = index
this.modeWhiteList[key]()
}
})
// 默认为hash模式
if(this.mode === -1){
console.log("default")
this.mode = 0;
this.modeWhiteList['hash']();
}
}
// hash 路由
RouterClass.prototype.hashRouter = function(){
this.curUrl = window.location.hash.slice(1) || "/"
this.routerMap[this.curUrl]()
}
// history 路由
RouterClass.prototype.historyRouter = function(){
this.curUrl = window.location.pathname
console.log(this.curUrl)
this.routerMap[this.curUrl]()
}
/* 事件监听 */
// hash 模式监听
RouterClass.prototype.eventHashRouter = function(){
window.addEventListener("hashchange",this.hashRouter.bind(this))
window.addEventListener("load",this.hashRouter.bind(this))
}
// history 模式监听
RouterClass.prototype.eventHistoryRouter = function(){
window.addEventListener("popstate",this.historyRouter.bind(this))
}
/* 路由注册 */
RouterClass.prototype.register = function(path,callback){
this.routerMap[path] = callback || function(){}
}
/* 跳转模式 */
// push 模式跳转
RouterClass.prototype.push = function(url){
if(this.mode === Object.keys(this.modeWhiteList).indexOf("history")){
window.history.pushState({},"",url)
this.routerMap[url]()
}else{
url = "#" + url;
window.location.href = url;
}
}
// replace 模式跳转
RouterClass.prototype.replace = function (url) {
if(this.mode === Object.keys(this.modeWhiteList).indexOf("history")){
window.history.replaceState({},"",url)
this.routerMap[url]()
}else{
url = "#" + url;
window.location.replace = url;
}
}
var Router = new RouterClass(
{mode:"history"}
);
Router.register(baseUrl + "",function () {
app.innerHTML = "index"
})
Router.register(baseUrl + "news",function () {
app.innerHTML = "news"
})
Router.register(baseUrl + "products",function () {
app.innerHTML = "products"
})
</script>
</body>
</html>