Router and Route

When we create an instance VueRouter when

let router =  new VueRouter();

There will be a whole picture router Router object , This router object can pass through... On other routing components An instance of the routing component .$router Access to

When jumping to a new route , It will create a new one route Instance object , Each routing instance is unique , Save the status information of the current route .

Be careful ： There is only one in the application Router object , Accessed in each routing component Router object It's all one Router example , Between each other same , But every one of them Between routes Of route yes Different .

Attribute method

$router

console.log(this. $ router);

• attribute

• Method

 +  Method 
          - addRoute(parentName, route) :   Add a row of route records to the route 
          - afterEach(to, from, failure) :  Global route navigation post guard ,  Execute every time after switching routes 
          - beforeEach(to, from, failure):  Global route navigation front guard ,  Every time before switching routes 

          - push({
    
              path: Routing path ,
              name: Routing name ,
              query:{
    } Delivered query Parameters ,
              params:{
    } Delivered params Parameters ,
          }):  Jump to a route , Jump to... In the way of programmed navigation ,  Pass in an object 
                     Consistent with the declarative route navigation configuration properties , Because it is pushing a record into the record stack 
                     So jump back   Will be back to back   Previous routing records ( Not replaced )

          - replace({
    }) :  Jump to a route  , Navigate programmatically , Parameters and push Agreement 
                           Because the current record of the routing record stack is replaced by , So you can't go back to the previous record after jumping 
                           You can only go back to the previous record of the previous record ( Replaced )

          - resolve({
    }):  Jump to a new page , Parameters and push Agreement 

          - back():  Go back to the previous route 

          - forward():  Forward a route record in the historical route 

          - getRoutes():  Get a complete list of routes 

          - go(num):  Forward or backward in the historical routing record , Before or after depends on the plus or minus of the parameter 

          - hasRoute(routeName):  Check whether there is a specified name The routing 

          - removeRoute(routeName):  Remove the corresponding route record in the stack 

          - onError(function(err)···):  Capture errors that occur during navigation 

$route

console.log(this.$route);

 - fullPath :  Jump to the full path of the route 

 - hash：  Currently routed hash value ,  Nothing is empty 

 - meta：  Routing meta information 

 - name： The name of the route definition 

 - matched ：   Array , Contains configuration parameter objects corresponding to all fragments contained in the current matching path .
   
 - path：  The absolute path corresponding to the current route （ obtain ）

 - params：  Currently routed params Parameters （ obtain ）

 - query：  Currently routed query Parameters （ obtain ）

Declarative navigation and functional navigation

Navigation ：

​ A route is executed once , It's just a navigation . Navigation can be divided into declarative navigation and programmatic navigation .

Declarative navigation ：

A routing component ( Such as router-link) Route jump can be realized by clicking , This process is called “ Declarative navigation ( static state )”.

Programming navigation ：
Switching execution is not achieved through declarative navigation , Through the way of program code , Namely “ Programming navigation ( dynamic )”.

Implementation of programming navigation ：
Use directly through router objects js Code operation

1. Declarative navigation is rendered directly to the page , such as a link
2. Programmed navigation is used in js After processing the logic, you need to jump to the page , For example, click on button Button jump