What is routing? Why use routing

1.1 In traditional web pages, we use the page to jump, this will cause the page to re-render, to load those loaded things, this will slow down the page access, performance is also reduced

1.2 Routing is to dynamically render what we need by listening for url changes so that we don’t have to reload what has already been loaded

Ii. The principle of routing and how to achieve routing

2.1 The principle of routing is to listen for URL changes

2.2 There are two ways to implement routes: hash and HISTORY in H5

3. Hash is used to implement routing

3.1 We can use the hashchange event to listen when the HASH value of the URL changes

3.2 we can cite a specific scenario, we write three pages, respectively is 1, 2, 3, the content of the page, respectively is 1, 2, 3, according to our usual we will write three interface is web page 1, page 2 and page 3, as we also don’t have to write three pages, as long as by monitoring the change of the url to change the values of the page

<body>
  <ul>
      <li><a href="# /">turn one</a></li>
      <li><a href="#/two">turn two</a></li>
      <li><a href="#/three"> Turn three</ A ></li> </ul> </body>constructor() {
    this.routes = {};
    this.currentUrl = ' ';
    this.refresh = this.refresh.bind(this);
    window.addEventListener('load', this.refresh, false);
    window.addEventListener('hashchange', this.refresh, false);
  }

  route(path, callback) {
    this.routes[path] = callback || function() {};
  }

  refresh() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
  }
}

window.Router = new Routers();
var content = document.querySelector('body');
// change Page anything
function changeText(text) {
  content.innerHtml= text;
}
Router.route('/'.function() {
  changeText('yellow');
});
Router.route('/two'.function() {
  changeText('two');
});
Router.route('/three'.function() {
  changeText('three');
});

Copy the code

But here we did not realize the function of forward and backward, the implementation is cumbersome, and the function will have bugs, we will not go to one by one implementation

4, the way to implement routing — H5 history

4.1 The PopState event is passed to the Window object whenever the active history item changes. If the active history item was created by pushState or changed by replaceState, the state property of the POPState event contains a copy of the current history state object

<body>
  <ul>
      <li><a href="# /">turn one</a></li>
      <li><a href="#/two">turn two</a></li>
      <li><a href="#/three"> Turn three</ A ></li> </ul> </body>constructor() {
    this.routes = {};
    this.refresh = this.refresh.bind(this);
    window.addEventListener('load', this.refresh, false);
    window.addEventListener('popState'.function (e) {
      this.refresh(e.state.path), false
    });
  }

  route(path, callback) {
    history.pushState({path: path}, null, path);
    this.routes[path] = callback || function () {};
  }

  refresh(path) {
    this.routes[path]();
  }
}

window.Router = new Routers();
const content = document.querySelector('body');
const ul = document.querySelector('ul');

// change Page anything
function changeText(text) {
  content.innerHtml = text;
}

Router.route('/'.function () {
  changeText('yellow');
});
Router.route('/two'.function () {
  changeText('two');
});
Router.route('/three'.function () {
  changeText('three');
});

ul.addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    e.preventDefault();
    Router.go(e.target.getAttribute('href')); }});Copy the code