前端路由

前端路主要分为两个方式。一个是hash，一个是history（更改url但不刷新页面）

1、hash

hash在写法上主要是'#/.......'这么一个形式。原先是作锚点使用。主要体现方式就是超链接形式<a href='#/.......' >aaa</a>。

点击aaa的时候会跳转到对应的连接地址同时浏览器的url也会相应改变

同时hash方法提供onhashchange方法能够监听路由更改。更改路径通过location.hash可以获取到

 window.addEventListener(
    'hashchange',
    () => {
      console.log(location.hash);
    },
    false
  );
//在浏览器地址栏#/后输入不同的.....地址，可以打印相应内容

因此在hash路由设计时可以依靠hashchange方法监听路径更改并显示相应的已注册过的页面

同时需要注意的是hash路由地址输入是真实地址会被记录，点击前进后退按钮都会直接返回之前之后的页面

<script>
function Router() {
    this.routes = {};
    this.currentUrl = '';
  }
  Router.prototype.map = function(path, callback) {
    this.routes[path] = callback || function() {};
  };
  Router.prototype.refresh = function() {
    console.log('当前' + location.hash);
    this.currentUrl = location.hash.slice(1) || '/';
    console.log(this.currentUrl);
    try {
      this.routes[this.currentUrl]();
    } catch (e) {
      alert('当前路径还未注册');
    }
  };
  Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
  };
  window.Router = new Router();
  window.Router.init();
  let body = document.getElementsByTagName('body');
  function getInnerHtml(text) {
    body[0].innerHTML = text;
  }
  Router.map('/green', function() {
    getInnerHtml('green');
  });
  Router.map('/a', function() {
    getInnerHtml('a');
  });
</script>

2、history是h5新增,通过以下两个api可以实现url更改对应页面数据显示但不刷新，通过前进后退触发onpopState也可显示对应页面

history.pushState({},title,url)：新增一条状态放入历史状态栈，更改浏览器url并显示页面

history.replaceState({},title,url):新的路径替换原先的路径，但不刷新页面只是更改浏览器urll并显示页面

url更改后如果再点击刷新会显示获取不到该地址下内容报404（history需要配合后端一同使用）

• 状态对象{}（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。
• 标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
• 地址（URL）： 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

通过popstate方法可以对前进后退按钮事件进行监听并显示对应页面内容，监听到的数据包含了对pushState以及replaceState中的状态对象state object =>通过e.state可获取到

    <p id="example">
      <a href="/yellow" title="yellow">name</a>
      <a href="/purple" title="purple">age</a>?
    </p>
    <div class="main" id="main"></div>

<script>
 (function() {
    let examplebox = document.getElementById('example');
    let mainbox = document.getElementById('main');
    examplebox.addEventListener('click', function(e) {
      e.preventDefault();
      var elm = e.target;
      var url = elm.href;
      var tlt = elm.title;
      history.pushState({ path: url, title: tlt }, null, url);
      mainbox.innerHTML = 'pushState  ' + tlt;
      mainbox.style.backgroundColor = tlt;
    });
    window.addEventListener('popstate', function(e) {
      var state = e.state;
      mainbox.innerHTML = 'popState  ' + state.title;
    });
  })();
</script>

参考链接：https://www.jianshu.com/p/d2aa8fb951e4

参考链接：https://blog.csdn.net/jx950915/article/details/80612691

参考连接：https://github.com/youngwind/blog/issues/109