hash路由、history路由_路由 hashlist-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72498273/article/details/145343236

hash路由

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      ul {
        list-style: none;
        width: 15%;
        border: 1px solid #000;
        margin: 0;
        height: 100%;
        padding: 0;
        float: left;
      }
      ul > li {
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      ul > li > a {
        text-decoration: none;
        color: #000;
        display: block;
        width: 100%;
        height: 100%;
      }
      #content {
        width: 84%;
        float: left;
        height: 100%;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <ul>
      <li id="login"><a href="#login">登录</a></li>
      <li id="register"><a href="#register">注册</a></li>
      <li id="userlist"><a href="#userlist">用户列表</a></li>
      <li id="adduser"><a href="#adduser">添加新用户</a></li>
    </ul>
    <div id="content"></div>
    <script>
      // 网页的路由分为两种，一种叫做hash路由，一种叫做History路由

      var obj = {
        login: ` <form>
                    <label>用户名：</label><input type="text" name="user"><br>
                    <label>密码:</label><input type="password" name="password" autocomplete><br>
                    <button type="submit">登录</button>
                    <button type="reset">重置</button>
                </form>`,
        register: `<form>
                        <label>用户名：</label><input type="text" name="user"><br>
                        <label>密码:</label><input type="password" name="password" autocomplete><br>
                        <label>电话号码:</label><input type="text" name="tel"><br>
                        <label>邮箱:</label><input type="text" name="email"><br>
                        <button type="submit">注册</button>
                        <button type="reset">重置</button>
                 </form>`,
        userlist: ` <table>
                <thead>
                        <tr>
                            <th>姓名</th>
                            <th>密码</th>
                            <th>电话</th>
                            <th>邮箱</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>123123</td>
                        <td>18363781824</td>
                        <td>18363781824@qq.com</td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>asdasd</td>
                        <td>18638493022</td>
                        <td>18638493022@qq.com</td>
                    </tr>
                    <tr>
                        <td>王五</td>
                        <td>sfwwer</td>
                        <td>18618273742</td>
                        <td>18618273742@qq.com</td>
                    </tr>
                </tbody>
                </table>`,
        adduser: `<form>
                        <label>用户名：</label><input type="text" name="user"><br>
                        <label>密码:</label><input type="password" name="password" autocomplete><br>
                        <label>电话号码:</label><input type="text" name="tel"><br>
                        <label>邮箱:</label><input type="text" name="email"><br>
                        <button type="submit">添加用户</button>
                        <button type="reset">重置</button>
                    </form>`,
      };

      var content, prevLi;
      init();

      function init() {
        // 当hash改变时
        window.onhashchange = hashHandler;
        content = document.getElementById('content');
        //   如果当前地址中有hash，则直接执行hashHandler，就会获取hash，填充内容改变li背景色
        if (location.hash) {
          hashHandler();
        } else {
          // 如果没有hash给当前地址后面添加一个hash默认是login
          location.href += '#login';
        }
      }

      function hashHandler() {
        var name = location.hash.slice(1);
        content.innerHTML = obj[name];
        changeLi(name);
      }

      function changeLi(name) {
        // 如果上一次存储的li是真值，有值，就把上一次存储的li背景色换为白色
        if (prevLi) {
          prevLi.style.backgroundColor = '#FFF';
        }
        // 根据传入name获取当前点击的li
        var li = document.getElementById(name);
        // 将这个li存储给prevli，就是本次点击的li，下次点击时就可以用来判断上次点击是谁
        prevLi = li;
        // 将本次点击li设置背景色为灰色
        li.style.backgroundColor = '#ccc';
      }
    </script>
  </body>
</html>

history路由

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      ul {
        list-style: none;
        width: 15%;
        border: 1px solid #000;
        margin: 0;
        height: 100%;
        padding: 0;
        float: left;
      }
      ul > li {
        height: 50px;
        line-height: 50px;
        text-align: center;
      }

      #content {
        width: 84%;
        float: left;
        height: 100%;
        border: 1px solid #000;
      }
      .active{
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <ul>
      <li id="login">登录</li>
      <li id="register">注册</li>
      <li id="userlist">用户列表</li>
      <li id="adduser">添加新用户</li>
    </ul>
    <div id="content"></div>
    <script>
      var obj = {
        login: ` <form>
                    <label>用户名：</label><input type="text" name="user"><br>
                    <label>密码:</label><input type="password" name="password" autocomplete><br>
                    <button type="submit">登录</button>
                    <button type="reset">重置</button>
                </form>`,
        register: `<form>
                        <label>用户名：</label><input type="text" name="user"><br>
                        <label>密码:</label><input type="password" name="password" autocomplete><br>
                        <label>电话号码:</label><input type="text" name="tel"><br>
                        <label>邮箱:</label><input type="text" name="email"><br>
                        <button type="submit">注册</button>
                        <button type="reset">重置</button>
                 </form>`,
        userlist: ` <table>
                <thead>
                        <tr>
                            <th>姓名</th>
                            <th>密码</th>
                            <th>电话</th>
                            <th>邮箱</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>123123</td>
                        <td>18363781824</td>
                        <td>18363781824@qq.com</td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>asdasd</td>
                        <td>18638493022</td>
                        <td>18638493022@qq.com</td>
                    </tr>
                    <tr>
                        <td>王五</td>
                        <td>sfwwer</td>
                        <td>18618273742</td>
                        <td>18618273742@qq.com</td>
                    </tr>
                </tbody>
                </table>`,
        adduser: `<form>
                        <label>用户名：</label><input type="text" name="user"><br>
                        <label>密码:</label><input type="password" name="password" autocomplete><br>
                        <label>电话号码:</label><input type="text" name="tel"><br>
                        <label>邮箱:</label><input type="text" name="email"><br>
                        <button type="submit">添加用户</button>
                        <button type="reset">重置</button>
                    </form>`,
      };

      var lis,content;
      init();
      function init(){
        lis=document.getElementsByTagName("li");
        content=document.getElementById("content");
        window.onpopstate=popstateHandler;
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=clickHandler;
        }
        // if(history.state){
        //     popstateHandler();
        // }else{
        //     // 当第一次进入时没有历史记录，这时候，可以将当前的历史记录替换为login
        //     history.replaceState("login","login");
        //     // 并且执行popstateHandler用来根据当前的History.state改变效果
        //     popstateHandler();
        // }
        if(!history.state){
            history.replaceState("login","login");
        }
        popstateHandler();
      }

      function clickHandler(){
         var name=this.id;
         content.innerHTML=obj[name];
         history.pushState(name,name)
         changeLi(name)
      }
      function popstateHandler(){
        // console.log(history.state)//获取存储历史中的name
        content.innerHTML=obj[history.state];
        changeLi(history.state);
      }

      function changeLi(name){
        // 根据名字获取到对应的li
        var li=document.getElementById(name);
        // 根据类名获取元素的列表，多个同一个类名的li
         var prevLi=document.getElementsByClassName("active")[0];
        // 如果上一次添加active的li存在，将它的class设置为""
         if(prevLi) prevLi.className="";
        //  设置当前li的class为active
         li.className="active";
      }
    </script>
  </body>
</html>