Front-end routing classification and principle

  1. preface

    Now the front end should not know what is SPA, what is SSR. SPA is a so-called single page application, that is, the route jumps without refreshing the page; SSR is very old things, such as JSP, ASP, that is, server-side rendering, to the browser is already rendered HTML files, switching routes will also refresh the page. Which one to use depends on the team’s needs, and the front end is basically SPA, except for SEO heavy cases. With the gradual decline in the importance of SEO (Internet access is more and more than a monopoly of Baidu), and now popular front and back end separation, micro services and other reasons, SPA is the majority of the front end of the choice, so re-learn the front end of the beginning, using front-end routing as a topic, next to talk about SPA principle.

  2. classification

    1. The two front-end routing modes supported by browsers are hash and History. Informally, hash routes with # are hash routes.

    2. Comparison of advantages and disadvantages:

      1. hash
        1. Advantages: good compatibility, not to server support
        2. Weakness: with #, not in line with the human aesthetic, will be some of the cleanliness of the father a diss
      2. history
        1. Advantages: accord with human aesthetic
        2. Disadvantages: Development cost, need server support. Some of the front end doesn’t know much about nginx configuration or SpringMVC routing. If the back end doesn’t support it, you’ll have to do it yourself, but it’s a once-and-forever job.

    3. Principle (Key introduction)

      1. Hash routing

        1. When the HASH of the URL changes, that is, when the content behind the browser’s address bar # changes, the page does not refresh and the browser does not send a page request to the back end. All the front end does is change the hash and listen for the Hashchange event.

        2. The code to change the hash:

          window.location.hash = '#a'

          window.location.replace('#b')

          The above two lines of code can open the console at any site and try it out.

        3. Listen for hashchange code:

          window.addEventListener('hashchange', () => document.getElementById('root').innerHTML = 'hash has change')

      2. The history of routing

        1. The HTML5 specification provides history.pushState and history.replaceState for routing control. With these two methods, you can change the URL without sending a request to the server.

        2. The code to change history:

          history.pushState({}, '', '/a')

          history.replaceState({}, '', '/b')

          The above two lines of code can open the console at any site and try it out.

        3. Listen to history change:

          This is a bit of a hassle, unlike hash, where there is a ready-made hashchange method. Considering that there are only two ways to change history: browser forward and backward, and triggered by the above two lines of code, you can do callbacks to either way:

          1. Browser Back/Forward: Raises the PopState event

            ​ window.addEventListener('popstate', handleHref);

          2. History. PushState/history. ReplaceState: synchronous event, the popstate directly to the callback function can be written in the book behind.

            history.pushState({}, '', '/a');

            handleHref();

          3. Callback function:

            function handleHref () {document.getElementById('app').innerHTML = 'history has change' }