Web page URL component

access

1. H5 Hash route

1.1 Features of Hash

1. Hash changes trigger web page redirects, that is, the browser moves forward or backward.
2. Hash changes do not refresh the page, a required feature of SPA;
3. Hashes are never submitted to the server.

1.2 Hash Change Mode

• JS modify the url
• Manually change the URL hash
• Browsers move forward and backward

1.3 Hash Code Implementation

        <button id="btn1"> modify hash</button>...window.onhashchange = (event) = > {
            console.log('old url', event.oldURL)
            console.log('new url', event.newURL)

            console.log('hash:', location.hash)
        }

        // The first time the page loads, get the hash
        document.addEventListener('DOMContentLoaded'.() = > {
            console.log('hash:', location.hash)
        })

        // change the url
        document.getElementById('btn1').addEventListener('click'.() = > {
            location.href = '#/user'
        })
Copy the code

2. H5 History Route

• Url specification route, but jump without refreshing the page
• history.pushState
• window.onpopstate

2.1 Normal page browsing

• github.com/xxx Refresh page
• github.com/xxx/yyy Refresh page
• github.com/xxx/yyy/zzz Refresh page

2.2 Transforming an H5 History route

• github.com/xxx Refresh page
• github.com/xxx/yyy The page is not refreshed
• github.com/xxx/yyy/zzz The page is not refreshed

2.3 H5 history code implementation

• Set history.pushState(state, ”, ‘page1’)

• Monitor window. Onpopstate = () = > {}

• The page first loads, access to the document. The addEventListener (‘ DOMContentLoaded ‘() = > {})

• History is required on the server for reference

  • Router.vuejs.org/zh/guide/es…

     <p>history API test</p>
     <button id="btn1">Modify the url</button>. <script>// The first time the page loads, get the path
        document.addEventListener('DOMContentLoaded'.() = > {
            console.log('load', location.pathname)
        })

        // Open a new route
        With pushState, the browser does not refresh the page
        document.getElementById('btn1').addEventListener('click'.() = > {
            const state = { name: 'page1' }
            console.log('Switch route to'.'page1')
            history.pushState(state, ' '.'page1') // Important!!
        })

        // Listen for the browser to move forward and backward
        window.onpopstate = (event) = > { // Important!!
            console.log('onpopstate', event.state, location.pathname)
        }
    </script>
Copy the code

2.4 Can intercept a tag click-to-thing routing implementation

class JSHistoryRouter {
 constructor(routerview){
     this.routerView = routerview
 }
 init() {
     let that = this
     let linkList = document.querySelectorAll('a[href]')
     linkList.forEach(el= > el.addEventListener('click'.function (e) {
         e.preventDefault() // Block the  default jump event
         history.pushState(null.' ', el.getAttribute('href')) // Get the URL, jump
         onPopState()
     }))
     // Listen for URL changes
     window.addEventListener('popstate', onPopState)
 }
 push(path){
     history.pushState(null.' ', path)
     onPopState()
 }
 replace(path){
     history.replaceState(null.' ', path)
     onPopState()
 }
 // When the route changes, render the corresponding UI according to the route
function onPopState () {  
     switch (location.pathname) {    
         case '/home':      
         routerView.innerHTML = 'Home'      
         return    
     case '/about':      
         routerView.innerHTML = 'About'      
         return    
      default:      
         return}}}Copy the code

3. Summary

3.1 Choice between the Two

• The TO B system recommends using hash, which is easy TO use and insensitive TO URL specifications
• TO C system, can consider H5 history, but requires server support
• If you can choose something simple, don’t use something complicated. Consider the costs and benefits

[aside] The react-router supports three types

• BrowserRouter, the history object that controls the browser’s real address
• HashHistory, which controls the history object of the browser hash
• StaticRouter, which controls the address in memory

[Digression] History object

• You use the History library. Support for push, GO, goBack, goForward operations.
• BrowserRouter and The history object of the browser called HashHistory
• StaticRouter maintains a stack of addresses in memory. Support push, go, goBack, goForward

How is the browser history stack managed

Article: www.cnblogs.com/accordion/p…