标签来装载各路由对应的页面内容。
参考 vue-router 的调用，我们会这么地调用一个 Router ，将路由与对应组件作为参数传入：
const router = new Router([
{
path: '/',
component: 'home'
},
{
path: '/book',
component: 'book'
},
{
path: '/movie',
component: 'movie'
}
]);
数组里是各路由对应的要显示的内容，接下来就来开始实现这个 Router 。
Hash 路由实现
Hash 路由 标签都需要带上 # ：

Router 的代码实现如下：
class Router {
constructor (options) {
this.routes = {};
this.init();
// 遍历，绑定视图更新
options.forEach(item => {
this.route(item.path, () => {
document.getElementById('content').innerHTML = item.component;
});
});
}
// 绑定监听事件
init () {
window.addEventListener('load', this.updateView.bind(this), false);
window.addEventListener('hashchange', this.updateView.bind(this), false);
}
// 更新试图
updateView () {
const currentUrl = window.location.hash.slice(1) || '/';
this.routes[currentUrl] && this.routes[currentUrl]();
}
// 将路由与回调函数关联
route (path, cb) {
this.routes[path] = cb;
}
}
实现效果如下：
History 路由实现
History 路由需要服务器的支持，可以点击这里 的代码参考。

Router 的代码实现如下：
class Router {
constructor (options) {
this.routes = {};
this.init();
this.bindEvent();
// 遍历，绑定视图更新
options.forEach(item => {
this.route(item.path, () => {
document.getElementById('content').innerHTML = item.component;
});
});
}
// 绑定点击事件
bindEvent () {
const _this = this;
const links = document.getElementsByTagName('a');
[].forEach.call(links, link => {
link.addEventListener('click', function () {
const url = this.getAttribute('data-href');
_this.push(url);
});
});
}
// 绑定监听事件
init () {
window.addEventListener('load', this.updateView.bind(this), false);
window.addEventListener('popstate', this.updateView.bind(this), false);
}
push (url) {
window.history.pushState({}, null, url);
this.updateView();
}
// 更新试图
updateView () {
const currentUrl = window.location.pathname || '/';
this.routes[currentUrl] && this.routes[currentUrl]();
}
// 将路由与回调函数关联
route (path, cb) {
this.routes[path] = cb;
}
}
实现效果如下：
最后
前端路由实现方式有两种，分别是：
Hash 路由
History 路由
原理都是修改 url 的同时不刷新页面，不向服务器发送请求，通过监听特殊的事件来更新页面。
以上实现全部源码参考这里。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。