Detailed explanation of vue router using jquery and params to pass parameters

This article mainly introduces the use and difference of vue router using query and params to pass parameters. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Written in front:

Passing parameters is an operation that is often used on the front end. Many scenarios will require the parameters of the previous page. This article will introduce in detail what vue router is. How to transfer parameters, and some small details. Friends in need can make a reference. If you like it, you can like it or follow it. I hope it can help everyone.

How does Vue router pass parameters

What are params and query?

params:/router1/:id,/router1/123,/router1/789, the id here is called params

query:/router1?id=123,/router1?id=456 , the id here is called query.

Routing interface:

router.js:

Routing settings here, when you use the params method to pass parameters, you must add the parameter name after the route, and pass the parameters When , the parameter name should correspond to the parameter name set behind the route. Using the query method, there is no such restriction and you can use it directly in the jump.

Note: If you do not write parameters on the route, you can still pass it, but your parameters will not be displayed on the url, and when you jump to other pages Or the parameters will be lost when refreshing the page (as shown in the figure below), then http requests or other operations that rely on this parameter will fail.

Pay attention to the routing parameters above. The id parameter is set on the routing. I did not set id2 in the routing, so id2 disappeared after refreshing. In the project, we can never ask the user not to refresh.

Component 1:

<template>
 <p class="app_page">
 <h1>从这个路由传参到别的路由</h1>
 <router-link :to="{ name:&#39;router1&#39;,params: { id: status ,id2: status3},query: { queryId: status2 }}" >
  router-link跳转router1
 </router-link>
 </p>
</template>
<script>
export default {
 name: 'app_page',
 data () {
 return {
  status:110,
  status2:120,
  status3:119
 }
 },
}
</script>

Programmatic navigation jump:

The above router-link transfer parameters, you can also use the programmatic navigation in the router document to jump and transfer ginseng.

this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
//编程跳转写在一个函数里面，通过click等方法来触发

The effect of these two parameter transfers is exactly the same. Programmatic navigation can be used to make judgment jumps, such as whether to authorize, log in, etc. Friends who don’t know much about this, You can skip this programmatic navigation and come back to it later.

Component 2:

<template>
 <p class="router1">
 <h1>接收参数的路由</h1>
 <h1> params.id：{{ $route.params }}</h1>
 <h1>query.status:{{ $route.query.queryId }}</h1>
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
 </p>
</template>

Passing parameters is relatively simple. You can successfully pass them according to the usage method of the above component.

Tip: To obtain the parameters on the route, use $route, without r after it.

What is the difference between params passing parameters and query passing parameters:

1. Usage

Just now, query needs to be introduced with path, and params needs to be introduced with name. The introduction and receiving parameters are similar, namely this.$route.query.name and this.$route.params.name.

Note that when receiving parameters, it is already $route instead of $router! !

2. The

query displayed is more similar to the get parameters in our ajax, and the params is similar to the post. To put it simply, the former displays the parameters in the browser address bar. The latter does not display

query:

     

params:

3. Params is part of the route. Must have. Query is a parameter spliced ​​after the url. It doesn't matter if it doesn't exist.

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

For example: Jump to /router1/:id

<router-link :to="{ name:&#39;router1&#39;,params: { id: status}}" >正确</router-link>
<router-link :to="{ name:&#39;router1&#39;,params: { id2: status}}">错误</router-link>

4. You can pass parameters without setting params and query. When params is not set, refreshing the page or returning parameters will be lost. This point As mentioned above

Related recommendations:

Detailed introduction to the three keywords params, Ref, and out in C

#How to pass parameters from parent to child component in vue.js

Vue.js Implementation method of passing parameters from parent to child component

The above is the detailed content of Detailed explanation of vue router using jquery and params to pass parameters. For more information, please follow other related articles on the PHP Chinese website!