01. Basic Concepts

(1) Basic concepts

  • Vue-router: path manager for SPA (single page application),
  • Returns different content based on different user URL requests
  • vue-routerVue is the official routing plug-in for Vue. It is deeply integrated with vue.js and suitable for building single-page applications
    • vueSingle-page applications are based on routing and components
      • Routing is used to set access paths and map paths to components

(2) Contrast

  • The traditional page application uses some hyperlinks to realize the page switch and jump
  • In a single page application, switching between paths is a component switch

(3) Essence

  • The essence of a routing module is to establish a one-to-one mapping between URLS and components

02. Implementation principle

(1) Principle

  • SPA(Single Page Application) : A single page application with only one complete page

    • When it loads a page, it does not load the entire page, but only updates the contents of a specified container
    • One of the core aspects of a single-page application is updating the view without rerequesting the page

  • Vue-router implements single-page front-end routing in two modes:

    • Hash and History modes

    The mode parameter determines which mode to use

    const router = new VueRouter({
   mode: 'history'.// If not, the route uses hash mode by default
   routes: [...]. })Copy the code

03. There are two modes

(1) Hash mode

  • Mode configuration: Vue-router Uses the hash mode by default

  • Implementation principle:

    • The hash of a URL is used to simulate a full URL so that the page does not reload when the URL changes
    • onhashchangeEvent: This event is used to monitor changes in the hash value to update part of the page

  • Working Mode:

    • (1) Hash is in the URL#A symbol, also known as an anchor, represents a location on a web page
    • (2) Change of hash, that is, change#The latter part, the browser will onlyScroll to the appropriate positionWithout reloading
      • At the same time, every change#The rest of it is in the browserVisit historyAdd a record
      • Use your browser’s back button to go back to the previous location
    • (3) Hash appears in the URL, butIs not included in the Http request, only#The content before the symbol is included in the request
      • Therefore, for the back end, even if full routing coverage is not achieved, no 404 error is returned, and changing the hash does not reload the page

  • Conclusion:

    • Hash mode is to render different data for the specified DOM position by changing the anchor value

(2) History mode

  • Urls don’t look pretty because the hash mode puts # in them

  • If we don’t want ugly hash # symbols, we can use history mode

  • Mode configuration: just add mode: ‘history’ when configuring routing rules.

  • Implementation principle:

    • Take advantage of two new APIS in HTML5pushState(),replaceState()
    • These two methods apply to the browser log stack that is currently existingback,forward,goOn top of that, they provide the ability to modify the history
    • With these two apis, you can change the URL without sending a request, and you don’t need to reload the page

  • Working Mode:

    • (1) When you use history mode, the URL appears normally, such as xxx.com/user/id, no more…
    • (2) But because there is no# So when the user does something like refresh the page, the browser still sends a request to the server
      • This implementation requires server support
    • (3) And because the front-end URL must be the same as the actual request URL when sending the request, otherwise a 404 error will be returned
      • Therefore, the same page (such as the home page) should be returned when the URL does not match any static resources

  • Conclusion:

    • History mode, isto passpushState()Method to modify the browser’s browsing history without asking the back end to render

(3) Comparison

  • History mode Sets the new URL to be any URL of the same origin as the current URL

  • Hash mode can only change the part after #, so you can only set the URL of the same document as the current URL

  • The new URL set in History mode can be exactly the same as the current URL, which also adds the record to the stack

  • The new value set in Hash mode must be different from the original to trigger the operation and add the record to the stack

  • The History mode allows you to add any type of data to a record with the stateObject parameter

  • Only short strings can be added in Hash mode

  • The front END URL of the History mode must be the same as the back end URL; otherwise, the back end cannot process it and will return a 404 error

  • Hash mode does not return a 404 error even if there is no route at the back end

  • History mode allows you to set additional title properties for later use

Note: There is also an abstract mode, which supports all JavaScript runtime environments, such as the Node.js server side. If the browser API is not found, routing automatically forces the mode into this mode.

04. The page is displayed

(1) Modify the address bar

  • Directly modify the address bar to jump

(2) Programmatic navigation

  • By calling aN API in the form of JavaScript

    • This.$router. Push (' router ')

      A record is added to the history stack, which can be rolled back using the browser back button

    • this.$router.replace()

      The current history record is replaced and no record is added to history

    • this.$router.go(n)

      Use n to indicate how many steps forward/backward in the history record, similar to the window.history.go(n) method.

(3) Declarative navigation

  • By clicking the link:<router-link to=" router address "></router-link>

I front-end side dish chicken, if there is wrong, please forgive