JS实现简单路由器功能的方法

接下来我将详细讲解“JS实现简单路由器功能的方法”的攻略：

什么是路由器

路由器是互联网信息传递的关键设备之一，它负责完成数据的转发、路由选择等功能，是数码家庭不可或缺的设备之一。

在网页开发中，我们可以通过实现一个简单的路由器，来实现单页应用，实现页面的跳转和状态的管理等功能。

实现简单路由器功能的方法

使用Hash实现

我们可以通过URL的Hash值来实现页面间的切换和状态管理。

示例代码如下：

// 监听hash值改变事件
window.addEventListener('hashchange', doRouter)

// 初始化页面
doRouter()

// 路由处理函数
function doRouter() {
  // 获取当前hash值
  const currentHash = window.location.hash

  // 根据hash值，判断要打开的页面
  switch (currentHash) {
    case '#page1':
      showPage1()
      break;
    case '#page2':
      showPage2()
      break;
    default:
      showPage1()
  }
}

// 显示页面1
function showPage1() {
  // 其他页面隐藏
  hidePage2()

  // 页面1显示
  document.getElementById('page1').style.display = 'block'
}

// 显示页面2
function showPage2() {
  // 其他页面隐藏
  hidePage1()

  // 页面2显示
  document.getElementById('page2').style.display = 'block'
}

// 隐藏页面1
function hidePage1() {
  document.getElementById('page1').style.display = 'none'
}

// 隐藏页面2
function hidePage2() {
  document.getElementById('page2').style.display = 'none'
}

在示例代码中，我们监听了 hashchange 事件，然后根据当前的Hash值，判断所要打开的页面。同时，我们还提供了一些显示和隐藏页面的方法。

使用History API实现

我们也可以使用HTML5新添加的History API来实现路由器功能，这种方法可以更好的实现URL的美化，提高用户体验。

示例代码如下：

// 监听popstate事件
window.addEventListener('popstate', doRouter)

// 初始化页面
doRouter()

// 路由处理函数
function doRouter() {
  // 获取当前路径
  const currentPath = window.location.pathname

  // 根据路径，判断打开哪个页面
  switch (currentPath) {
    case '/page1':
      showPage1()
      break;
    case '/page2':
      showPage2()
      break;
    default:
      showPage1()
  }
}

// 显示页面1
function showPage1() {
  // 其他页面隐藏
  hidePage2()

  // 页面1显示
  document.getElementById('page1').style.display = 'block'
}

// 显示页面2
function showPage2() {
  // 其他页面隐藏
  hidePage1()

  // 页面2显示
  document.getElementById('page2').style.display = 'block'
}

// 隐藏页面1
function hidePage1() {
  document.getElementById('page1').style.display = 'none'
}

// 隐藏页面2
function hidePage2() {
  document.getElementById('page2').style.display = 'none'
}

// 页面跳转
function goToPage(path) {
  // 修改路径，保证浏览器历史
  window.history.pushState({}, '', path)

  // 调用路由处理函数
  doRouter()
}

在示例代码中，我们监听了 popstate 事件，然后根据当前路径，判断所要打开的页面。同时，我们还提供了一些显示隐藏页面的方法以及页面跳转的方法。

通过以上两个实现方法，我们便可以实现一个简单的路由器了。