SPA, route

1. SPA Definition

   1. Single page web application (single page web application, SPA).

   2. The entire application has only one complete page. (Single page with multiple components)

      That is, there is only the page localhost:3000/index.html (scaffolding root directory). index.html is automatically omitted, which is localhost:3000. There will be no such pages as localhost:3000/about.html, localhost:3000/home.html.

   3. Clicking the link on the page will not refresh the page, but only partial update of the page.

   4. Data must be obtained through ajax requests and displayed asynchronously on the front end.

      
      

2. Routing understanding

   When opening the page, the page is an address localhost:3000. When you click the link in the navigation area (routing link), it will not cause the page to jump, but change the address to localhost:3000/home, localhost:3000/about, etc. Front-end router will specifically monitor changes in browser paths, and display home, about and other components on the page after detection. /home, /about, etc. are paths, not urls.

   A route is a mapping relationship (key: value), the key is the path, and the value is component or function (backend).

   
   

   Routing classification

   • Backend routing (Node.js):

     1. Understand: value is a function, which is used to process the request submitted by the client.
     2. Register the route: router.get(path, function(req, res))
     3. Working process: When the node receives a request, it finds a matching route according to the request path, calls the function in the route to process the request, and returns the response data.

   • Front-end routing:

     1. Browser-side routing, the value is component, which is used to display page content.

     2. Register the route: <Route path="/test" component={test}>

     3. Working process: When the browser’s path changes to /test, the current routing component will become the Test component.

        
        

3. Front-end routing principle (how to implement routing detection)

   Front-end routing works by the history on the BOM (browser object). window is the BOM object, and document is the DOM object. Output window.history to get History {Length:1, scrollRestoration: “auto”, state:null} object.

   Programmers often do not directly manipulate history because the native API is not easy to use. Therefore, it is necessary to use the history.js library to operate.

   
   

   Change browser path

   <a onclick="return push('/test1')">push button</a> <!--Adding return will prohibit a tag herf jumping-->
   
   <script type="text/javascript" src="https:.../history.js"></script> <!--Import library-->
   <script type="text/javascript">
       let history = History.createBrowserHistory() //Create a history object
       
       function push(path){ //Push a piece of data into the history, the data is the path/test1
           history.push(path)
           return false
       }
       
       function replace(path){ //The current history is replaced with the path path.
           history.replace(path)
       }
       
       function forward(){ // Equivalent to the browser's forward button, just written by yourself.
           history.goForward()
       }
       
       function back(){ // Equivalent to the browser's back button, just written by yourself.
           history.goForward()
       }
       
   </script>

   After this code runs, the web page will not jump or refresh, but the current page path will become /test1. At the same time, a historical record is formed, which can be regressed. (React is required for path matching components, because only React has components.)

   
   

   Detect browser path changes

   history.listen((location) => { //The listen method listens to the path location. Called when the path changes.
       console.log('The request routing path has changed', location)
   })

4. The browser’s history structure

   The browser’s history is a stack structure. The record at the top of the stack is the webpage currently being viewed.

   When the website is opened, at the bottom of the stack there is the path xxxx.history.html of the website’s home page.

   
   

   When pushing, a xxxxp/test1 is added above the history record just now. If you continue to push, add an xxxxp/test2 to the top of the stack.

   When the point goes back, the top of the stack xxxxp/test2 is popped, and the web page returns to xxxxp/test1. Click back again, the top of the stack xxxxp/test1 is popped, and return to xxxx.history.html. When going forward, xxxxp/test1 goes back to the top of the stack, and then clicks xxxxp/test2 to go back to the top of the stack.

   
   

   During the replace operation, the current location (that is, the record on the top of the stack) is replaced by xxxxr/test3. That is, the data in the stack from the bottom of the stack to the top of the stack is xxxx.history.html, xxxxp/test1, xxxxr/test3, that is, the xxxxp/test2 records disappear. Back at this point, it will return to xxxxp/test1.

   
   

5. Two working modes of History

   Method 1 (that is, the one used above), directly uses the API on the history launched by H5. Some older browsers do not support it.

   let history = History. createBrowserHistory()

   
   

   Method 2, instead of using the H5 API, the hash value (anchor) is used.

   let history = History. createHashHistory()

   
   

   When using method 2, the browser address will have one more #, such as localhost:3000.html**#/. After the push and replace operations, the address will become localhost:3000.html#**/test1, still with #. Much like an anchor jump, i.e. does not cause a page refresh and leaves a history.

   
   

   There is no need to write the anchor point by yourself with the hash method, and the other codes are exactly the same as the first method. The disadvantage of the hash method is that there is a # (ugly) in the address, and the advantage is that it has excellent compatibility.

   #The following things belong to the foreground resources and will not be sent to the server.