Analysis on the difference between vue-router jump method

1. router-link (declarative routing, called in the page)

In Vue, router-link is called declarative routing, :to is bound to the target address of the jump, one is through name, and the other is path.
1.1 The route does not have parameters

 <router-link :to="{ name: 'word' }">routingnameMethod to jump to home page</router-link>
      <router-link :to="{ path: '/word' }">routingpathMethod to jump to home page</router-link>

1.2 Router with parameter jump
There are two main ways to pass routing parameters: one is params and the other is query. The main differences are:

1. Params parameter passed in params will not be displayed in the redirected URL, and query parameter passed in the URL.

2. The parameters passed by params are obtained through this.$. parameter; obtain, and the parameters passed by query are obtained through this.$. parameter.

3. Because the parameters passed by params are not displayed in URl, it is recommended to pass parameters when routing jumps.

4. No object or array reference type data can be passed, only string type data can be passed.

<router-link :to="{ name: 'home', params: { key: '1', value: 'Jump' } }">routingname,paramsMethod to jump to home page</router-link>
     <router-link :to="{ name: 'home', query: { key: '1', value: 'Jump' } }">routingname,queryMethod to jump to home page</router-link>
     
     <router-link :to="{ path: '/home', params: { key: '1', value: 'Jump' } }">routingpath,paramsMethod to jump to home page</router-link>
     <router-link :to="{ path: '/home', query: { key: '1', value: 'Jump' } }">routingpath,queryMethod to jump to home page</router-link>

2. this.$() (called in the function)

2.1 Jump without parameters

this.$({ path: '/home'});
this.$({ name: 'home'});

2.2 Jump with parameters

 <a-button type="primary" @click="goTo">routingnameJump mode</a-button>
  goTo() {
    this.$({ name: 'home', params: { a: '1', b: '2' } });//It is recommended to use params to transfer parameters    this.$({ name: 'home', query: { a: '1', b: '2' } });
  }

3. This.$() opens a new window and jumps

3.1 Jump through path form

goTo() {
    let routeData = this.$({
      path: '/home',
    });
    (, '_blank');
  }

3.2 Jump through name form

goTo() {
    let routeData = this.$({
      name: 'home',
    });
    (, '_blank');
  }

This is the end of this article about the difference between vue-router jumping. For more related vue-router jumping content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!