下面是一个简单的示例，展示如何使用`pushState`，`popState`和`location.hash`来实现一个简单的小型路由：
```javascript
var routes = {};
function route(path, callback) {
routes[path] = callback;
}
function handleRoute() {
var path = location.hash.slice(1);
if (routes[path]) {
routes[path]();
}
}
function navigateTo(path) {
history.pushState(null, null, '#' + path);
handleRoute();
}
window.addEventListener('popstate', handleRoute);
// 示例路由
route('/', function() {
console.log('Home page');
});
route('/about', function() {
console.log('About page');
});
// 处理初始路由
handleRoute();
```
在上面的代码中，我们首先定义了一个`routes`对象，用来存储不同路径对应的回调函数。然后定义了一个`route`函数，用来注册路径和对应的回调函数。
在`handleRoute`函数中，我们从`location.hash`中获取当前路径，并检查是否存在对应的回调函数。如果存在，就执行对应的回调函数。
`navigateTo`函数用于导航到指定路径。它会使用`history.pushState`方法来修改URL路径，然后再调用`handleRoute`函数来执行对应的回调函数。
最后，我们通过监听`popstate`事件来处理浏览器的前进后退操作，当用户点击浏览器的前进或后退按钮时，会触发`popstate`事件，我们可以在事件处理函数中重新执行对应的回调函数。
在示例路由中，我们注册了两个路径：`'/'`对应首页，`'/about'`对应关于页面。你可以根据自己的需求注册更多的路径和回调函数。
