分别创建 index.html 、 main.js 、router.js 和 route.js文件
route.js
export class Route {
constructor(name, path, handler) {
this.name = name;
this.path = path;
this.handler = handler;
}
get name() {
return this._name;
}
set name(name) {
this._name = name;
}
get path() {
return this._path;
}
set path(path) {
this._path = path;
}
get handler() {
return this._handler;
}
set handler(handler) {
this._handler = handler;
}
}
router.js
import {
Route
} from './route.js'
export class Router {
constructor() {
this.mode = 'history'
this.routes = []
this.root = '/'
}
get root() {
return this._root;
}
set root(val) {
this._root = val;
}
get mode() {
return this._mode
}
set mode(val) {
this._mode = (val == 'history' && window.history.pushState) ? 'history' : 'hash'
}
get routes() {
return this._routes;
}
set routes(val) {
this._routes = val;
}
add(route) {
this.routes.push(new Route(route.name, route.path, route.handler))
return this
}
navigate(route) {
route = route ? route : ''
this.match(route)
}
match(route) {
for (var i = 0; i < this.routes.length; i++) {
let paramNames = []
let regexPath = this.routes[i].path.replace(/([:*])(\w+) /g, function (full, colon, name) {
paramNames.push(name)
return '([^\/]+)';
}) + '(?:\/|$)'
let routeMatch = route.match(new RegExp(regexPath));
if (routeMatch !== null) {
var params = routeMatch
.slice(1, routeMatch.length)
.reduce((params, value, index) => {
if (params === null) params = {};
params[paramNames[index]] = value;
return params;
}, null);
if (params === null) {
this.routes[i].handler()
} else {
this.routes[i].handler(params)
}
this.location(route)
}
}
}
location(route) {
if (this.mode === 'history') {
window.history.pushState(null, null, this.root + route)
} else {
route = route.replace(/^\//, '').replace(/\/$/, '')
window.kk = window.kk.replace(/#(.*)$/, '') + '#' + route
}
}
}
main.js
import {
Router
} from './router.js'
const router = new Router()
router.mode = 'hash'
router.root = 'http://192.168.1.103:8080'
router.add({
name: 'home',
path: '/home',
handler: () => console.log('handler to home')
})
router.add({
name: 'about',
path: '/about',
handler: () => console.log('handler to about')
})
router.add({
name: 'contact',
path: '/contact',
handler: () => console.log('handler to contact')
})
router.add({
name: 'user',
path: '/user/:id/:action',
handler: (params) => console.log('user handler params')
})
const activeRoutes = Array.from(document.querySelectorAll('[route]'))
activeRoutes.forEach((route) => route.addEventListener('click', (e) => {
e.preventDefault();
router.navigate(e.target.getAttribute('route'))
}, false))
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Router</title>
<script type="module" src="main.js"></script>
</head>
<body>
<h3>Router</h3>
<div id="view"></div>
<button route="/"> Root</button>
<button route="/about">About</button>
<button route="/contact">Contact</button>
<button route="404">404</button>
<button route="/user/24/save">User add</button>
</body>
</html>