First, jump way

Page jump mode in VUE is divided into label jump and programmatic route jump respectively.

Tag jumps:
Map routes

Programmatic route jump: this.$router.push()

2. Jump without parameters

Label jump

There are two ways to write it, the default path argument and the explicit path argument.

<router-link to='/linkTo'> <button> jump </button> </router-link> <router-link :to="{path: '/linkTo'}"> <button> </button>Copy the code

Programmatic routing jumps

<button @click="jump"> jump </button> jump() {this.$router. Push ('/linkTo'); }Copy the code

3. Jump with parameters

Query and Params are two ways to jump with parameters. The query method is similar to the GET method in THE HTTP request, which will add parameters after the URL to jump. The params method is equivalent to the POST method in an HTTP request; the URL remains the same.

Note that the query method uses the path parameter, which corresponds to the path item in the router.js routing rule.

The params method uses the name parameter, which corresponds to the name item in the routing rule in router.js.

3.1 Label Redirection

jump

//query <router-link :to="{path: '/linkTo', query: {name:' Ming ', age: </button> </router-link :to="{name: 'linkTo', params: {name:' Ming ', age: </button> </router-link>Copy the code

Accept parameters

Console. log(this.$route.query.name); // ming console.log(this.$route.query.age); Console. log(this.$route.params.name); // ming console.log(this.$route.params.age); / / 18Copy the code

3.2 Programmatic route jump

jump

<button @click="jump1"> jump </button> jump1() {this.$router.push({path: '/linkTo', query: {name: "Ming ", age: </button @click="jump1"> jump </button> jump1() {this. 18}}); } //⚠️ if you want to pass a long parameter, use the params method because the URL is passed, and the length of the URL parameter is limited. </button> open2() {this.$route.push ({name: $route.push); Params: {name: "Ming ", age: 18}}); "abolinkTout", // ⚠️ }Copy the code

Accept parameters

//⚠️ note: When passing parameters, use the same way to pass the parameters, use the same way to receive!! Console. log(this.$route.query.name); // ming console.log(this.$route.query.age); Console. log(this.$route.params.name); // ming console.log(this.$route.params.age); // this.$route console.log(this.$route);Copy the code

Four,

In vue, there are two types of page jump:

tag jump and this.$router.push() programed route jump. The jump with parameters can be divided into query and params. If the parameters are not long or can be seen by users, the parameters can be passed in query mode. If the parameters are too many or too long or do not want to be discovered by users, the parameters can be passed in Params mode. Also remember that query corresponds to path in router.js and params to name in router.js; The way to accept an argument is to accept it the way it was passed.