master

分支 (2)

管理

管理

master

develop

note
/
router-hash.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由hash模式简单版本</title>
</head>
<body>
    <ul>
      <li><a href="#/">go to one</a></li>
      <li><a href="#/two">go to two</a></li>
      <li><a href="#/three">go to three</a></li>
    </ul>
    <div id="app"></div>

    <script>
      // 路由视图
      var app = document.querySelector('#app');

      // 路有变化时对应UI
      function onHashChange() {
        switch(location.hash) {
          case '#/':
            app.innerHTML = '我是one页面';
            break;
          case '#/two':
            app.innerHTML = '我是two页面';
            break;
          case '#/three':
            app.innerHTML = '我是three页面';
            break;
          default:
            app.innerHTML = '我是one页面';
            break;
        }
      }

      // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
      window.addEventListener('load', onHashChange, false);
      // 监听路由变化
      window.addEventListener('hashchange', onHashChange, false);
    </script>
</body>
</html>