利用pushState, popState和location.hash等方法自己实现一个小型路由

下面是一个简单的示例，展示如何使用pushState，popState和location.hash来实现一个简单的小型路由：

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'对应关于页面。你可以根据自己的需求注册更多的路径和回调函数。