Detailed explanation of Vue's hash jump principle

class VueRouter{
 constructor(options){
  this.matcher = createMatcher(options.routes || []);
//Here, in order to explain the hash mode, we will not judge which mode the user passed in this.history = new HashHistory(this); //this vue-router instance}
}

import History from './base'
// hash routing export default class HashHistory extends History{
 constructor(router){
  super(router); //Inherit and call the parent class is equal to call
 }
}
// Base class for routing export default class History {
 constructor(router){
  this.router = router;
 }
}

import History from './base';
function ensureSlash(){ 
 if(window.location.hash){
  return 
 }
 window.location.hash = '/'
}
export default class HashHistory extends History{
 constructor(router){
  super(router);
  ensureSlash(); // Ensure there is a hash
 }
}

init(app){
  const history = this.history;
  // When initializing, you should first get the current path and perform matching logic // Let the routing system transition to a certain path const setupHashListener = ()=> {
   history.setupListener(); // Listen for path changes}
  history.transitionTo( // The parent class provides a method responsible for jumping history.getCurrentLocation(), // The subclass obtains the corresponding path // After the jump is successful, register the path listener to prepare for the view update setupHashListener
  )
}

function getHash(){
 return window.location.hash.slice(1);
}
export default class HashHistory extends History{
 // ...
 getCurrentLocation(){
  return getHash();
 }
}

export default class HashHistory extends History{
 // ...
 setupListener(){
  window.addEventListener('hashchange', ()=> {
   // Transition to the corresponding path according to the current hash value this.transitionTo(getHash());
  })
 }
}

export function createRoute(record, location) { // {path:'/',matched:[record,record]}
 let res = [];
 if (record) { // If there is a record while (record) {
   res.unshift(record); // put the parent of the current record in front record = record.parent
  }
 }
 return {
  ...location,
  matched: res
 }
}
export default class History {
 constructor(router) {
  this.router = router;
  // Return the object based on the record and path, which will be used for router-view matching later this.current = createRoute(null, {
   path: '/'
  })
 }
 // Core logic transitionTo(location, onComplete) {
  // To match the path let route = this.router.match(location);
  // The same path does not need to transition if(
   location === route.path && 
   route.matched.length === this.current.matched.length){
   return 
  }
  //Update the route and change the _route attribute on the root instance as mentioned below this.updateRoute(route)
  onComplete && onComplete();
 }
}

export default class VueRouter{
 // ...
 //Make a proxy match(location){
  return this.matcher.match(location);
 }
}

function match(location){ // Later find the corresponding record based on the path let record = pathMap[location]
 if (record) { // Create the corresponding route according to the record //Parameters: /about/a:{path:xx,component...},path:'/about/a'
  return createRoute(record,{
   path:location
  })
 }
 // If no match is found, return an empty match return createRoute(null, {
  path: location
 })
}

install(Vue) {
 Vue.mixin({ // Add the beforeCreate method to the life cycle of all components beforeCreate() {
   if (this.$options.router) { 
   //Call the two-way data binding method in the Vue class Vue.util.defineReactive(this,'_route',this._router.history.current);
   } 
  }
 });
 // $route and $router methods are just the most common proxies in Vue. They are just for convenience. Object.defineProperty(Vue.prototype,'$route',{ // Each instance can get the $route property get(){
   return this._routerRoot._route; //Two-way data binding just performed above}
 });
 Object.defineProperty(Vue.prototype,'$router',{ // Each instance can get the router instanceget(){
   return this._routerRoot._router;
  }
 })
 }

history.listen((route) => { // Need to update the _route attribute, enter and exit a function app._route = route
});

export default class History {
 constructor(router) {
  // ...
  this.cb = null;
 }
 listen(cb){
  this.cb = cb; //Register function}
 updateRoute(route){
  this.current =route;
  this.cb && this.cb(route); // Update the _route property after updating current}
}