项目设计与原理分析

一、SPA设计：工作原理

1、History API  （onpopstate,pushState）

1.1 pushState注册路由

1.2 onpopstate监听路由

a.html

b.html

// 注册路由

      document.querySelectorAll('.history').forEach(item=>{

        item.addEventListener('click',(e)=>{

            e.preventDefault();

            let link = item.textContent;

            window.history.pushState({name:'history'},link,link);

        },false)

      });

// 监听路由

      window.addEventListener('popstate',(e)=>{

        console.log({location:location.href,state:e.state})

      },false);

1、Hash （hashchange,location.hash）

#a.html

#b.html

// 注册路由

      document.querySelectorAll('.hash').forEach(item=>{

        item.addEventListener('click',(e)=>{

            e.preventDefault();

            let link = item.textContent;

            location.hash=link;

        },false)

      });

// 监听路由

      window.addEventListener('popstate',(e)=>{

        console.log({location:location.href,hash.location.hash})

      },false);