JS路由跳转的简单实现代码

要实现JS路由跳转，我们需要用到HTML5的History API。简单来说，History API可以让我们在不刷新页面的情况下改变URL，并且可以监听URL的变化。

下面是一个简单的JS路由跳转的实现代码：

// 首先定义一个路由表
const routes = {
  '/': homePage,
  '/about': aboutPage,
  '/contact': contactPage
};

// 定义一个函数，根据URL加载对应的页面
function loadPage() {
  // 获取当前URL
  let currentURL = window.location.pathname;

  // 如果当前URL没有在路由表中定义，跳转到404页面
  if (!routes[currentURL]) {
    currentURL = '/404';
  }

  // 清空页面内容
  document.getElementById('app').innerHTML = '';

  // 加载对应的页面
  routes[currentURL]();
}

// 定义路由函数，使用History API改变URL
function navigateTo(url) {
  window.history.pushState(null, null, url);
  loadPage();
}

// 监听popstate事件，当URL发生变化时重新加载页面
window.addEventListener('popstate', loadPage);

// 加载首页
loadPage();

以上代码中，我们首先定义一个路由表，将不同的URL映射到不同的页面上。然后定义一个loadPage函数，根据当前URL加载对应的页面。loadPage函数会先获取当前URL，在路由表中查找对应的页面，如果找不到则跳转到404页面。然后通过innerHTML方法清空页面内容，再调用对应的页面函数来加载页面内容。

接下来定义一个navigateTo函数，用于改变URL并加载对应的页面。navigateTo函数使用History API的pushState方法改变URL，并调用loadPage函数来重新加载页面。

最后，我们监听popstate事件，当URL发生变化时重新加载页面。在页面初始化时调用loadPage函数，加载首页。

这样，我们就可以使用JS路由实现不刷新页面的单页应用了。