Write in front:

Parameter transfer is a common operation in the front end. Many scenarios require the parameters of the previous page. This article will explain in detail how the Vue Router performs parameter transfer and some minor issues. Friends in need can make a reference, like you can point bozan, or pay attention to it, I hope to help you.

This post was originally posted on my blog:obkoro1.com

How does the Vue Router send parameters

What are params and query?

Params: / Router1 /: ID, / Router1/123, / Router1/789

Query: / router1? id=123 ,/router1? Id =456, where the ID is called query.

Routing interface:

router.js:

When you pass a route parameter using the Params method, add the parameter name to the route, and pass the parameter name corresponding to the parameter name of the route. With the query method, there is no such restriction and it can be used directly within the jump.

Note: If the route does not write parameters, it can be passed, but your parameters will not show up in the URL, and the parameters will be lost when you jump to another page or refresh the page (as shown below), so HTTP requests or other operations that rely on this parameter will fail.

Note that the route parameter id is set on the route, but ID2 is not set in the route, so id2 will disappear after refreshing. In the project, it is impossible for us to ask the user not to refresh.

Component 1:

<template>
  <div class="app_page"> <h1> Pass parameters from this route to other routes </h1> <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}"> Router-link redirect router1 </router-link> </div> </template> <script>export default {
  name: 'app_page'.data () {
    return {
      status:110,
      status2:120,
      status3:119
    }
  },
}
</script>Copy the code

Programmatic navigation jump:

The router-link parameter above can also be jumped to using the programmatic navigation in the Router document.

    this.$router.push({  name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}); // Programming jumps are written in a function that is triggered by methods like clickCopy the code

Programmatic navigation can be used to determine the jump, such as whether to authorize, whether to log in, and so on. If you are not familiar with this, you can skip this programmatic navigation and look at it later.

Component 2:

<template>
  <div class="router1"> <h1> Route to receive parameters </h1> <h1> params.id: {{$route.params }}</h1>
    <h1>query.status:{{ $route.query.queryId }}</h1>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>Copy the code

The parameter is relatively simple, according to the use of the above components can be successfully passed.

$route = $route; r = $route;

What is the difference between params and query parameter passing?

1. Params are part of routing and must be present. Query is the parameter concatenated after the URL.

Once params is set in the route, params is part of the route. If the route has params passed, but the parameter is not passed during the jump, the jump will fail or the page will have no content.

For example, jump/Router1 /: ID

    <router-link :to="{ name:'router1',params: { id: status}}"</router-link> <router-link :to="{ name:'router1',params: { id2: status}}"> false < / router - the link >Copy the code

2, Params and query can be passed without setting the parameter, but if params is not set, the page refresh or return parameter will be lost. This does not happen with query

Aside:

This article ends here, write bad place, please forgive each big guy.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions. Then is the hope of watching the friends point a like, can also pay attention to me. Blog site and nuggets personal homepage

The above 2017.11.12