How many modes does vue-Router have?

Three models, “hash” | | “history” “abstract”, including the default browser environment as the hash, Node. Js environment by default for the abstract

  • hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api.
  • history: Relies on the HTML5 History API and server configuration. To viewHTML 5 History pattern.
  • abstract: Supports all JavaScript runtime environments, such as node.js server.If the browser API is not found, routing automatically forces the mode into this mode.

The basic principle of

$router push and replace are transitionTo, and the go, back, and forward methods are window.history.go(). It then calls transitionTo, which updates the route and triggers the re-rendering of

.

  • Hash mode listens for popState events first, demoted to Hashchange events, and history mode listens for popState events.
  • History.pushstate () and history.replacEstate () do not trigger popState events after changing the browser history stack.
  • Window.location. hash = ‘#/b’ Changing the hash does not refresh the page, it triggers the Hashchange event, and the hashchange is automatically added to the browser history;

Execute the process

  1. Click router-link or $router.push()
  2. Call this.history.push. The implementation of this function is slightly different in different modes. Take hash mode as an example.
  3. This. TransitionTo to switch paths. After switching, pushHash is called.
    • PushHash = window.location.hash = path
    • PushState calls either the browser’s native History pushState interface or the replaceState interface to update the browser url and push the current URL onto the history stack.
  4. UpdateRoute updates the _route value of the component instance saved by this.apps
  5. Rerender components
    • The vue.mixin () method globally registers a mix that affects every Vue instance created after registration. The mix defines the reactive _route attribute in the beforeCreate hook via vue.util.definereActive (). When the _route value changes, the render() method of the Vue instance is automatically called to update the view.

reference

  • The Vue Router’s official website
  • Vue-router Mechanism Analysis
  • Vue-router source code parsing -ustbhuangyi