vue-router principle and source code analysis

everything

use:

1, the new routing table:

const routes = []

export default routes

2, the new router instance

3, the instance is registered to router instance vue

4, using

Routing has three modes, namely: hash, history, abstract

The difference between the three models is essentially different types of objects created history

hash mode creates the object is HashHistory

history mode creates the object is HTML5History

abstract pattern created objects are AbstractHistory

 

Routing modification process

1, HashHistory: by listening  hashChange to effect a change listen address events

window.addEventListener('hashchange', () => {
  // this.transitionTo(...)
})

2, transitionTo: hashchange When executed  history.transitionTo(...), in this process, the address will match, to give a corresponding to the current address  route, and then provided to the corresponding  vm._route upper

3, vm._route: for  vm._route assignment to the Vue will be blocked, and trigger an update rendering process Vue assembly

4、