Differences between Vue-router query and Params parameter passing (receiving parameters)

Copyright: 79780938

 

<Div class = "markdown_views">
<! -- Do not delete the flowchart arrow icon -->
<SVG xmlns = "http://www.w3.org/2000/svg" style = "display: none;"> <path stroke-linecap = "round" d = "M5, 0 0, 2.5 5, 5z "id =" Raphael-marker-block "style ="-WebKit-tap-Highlight-color: rgba (0, 0, 0, 0 ); "> </path> </SVG>
<H4 id = "recently, when I was working on a project in vue today, I stepped on the Vue-router parameter passing pitfall query and Params. So I decided to summarize the differences between the two."> recently, I was learning Vue, during the project today, I stepped on the pitfall of passing parameters (query and Params) from Vue-router, so I decided to summarize the differences between the two. </H4>

 

<H2 id = "Summary of dry goods"> <a name = "t0"> </a> Summary of dry goods !!! </H2>

 

<H3 id = "1 query parameters and receiving Parameters"> <a name = "T1"> </a> 1. query parameters and receiving parameters

 

<PRE class = "prettyprint" name = "code"> <code class = "hljs CSS has-numbering"> parameter passing:
<SPAN class = "hljs-tag"> This </span>. $ <SPAN class = "hljs-tag"> router </span> <SPAN class = "hljs-class">. push </span> (<SPAN class = "hljs-Rules"> {
<SPAN class = "hljs-rule"> <SPAN class = "hljs-attribute"> path </span>: <SPAN class = "hljs-value"> <SPAN class = "hljs-string"> '/XXX' </span>
Query :{
ID: ID
</Span>}
})

Receiving parameters:
<SPAN class = "hljs-tag"> This </span>. $ <SPAN class = "hljs-tag"> route </span> <SPAN class = "hljs-class">. query </span> <SPAN class = "hljs-class">. ID </span> </code> <ul class = "pre-numbering" style = ""> <li style = "color: RGB (153,153,153 ); "> 1 </LI> <li style =" color: RGB (153,153,153); "> 2 </LI> <li style =" color: RGB (153,153,153 ); "> 3 </LI> <li style =" color: RGB (153,153,153); "> 4 </LI> <li style =" color: RGB (153,153,153 ); "> 5 </LI> <li style =" color: RGB (153,153,153); "> 6 </LI> <li style =" color: RGB (153,153,153 ); "> 7 </LI> <li style =" color: RGB (153,153,153); "> 8 </LI> <li style =" color: RGB (153,153,153 ); "> 9 </LI> <li style =" color: RGB (153,153,153); "> 10 </LI> </ul> </PRE>

<P> <code> note: the parameter is this. $ router, and the receiving parameter is this. $ route. You must see it here !!! </Code> </P>

 

<H3 id = "2params passing parameters and receiving Parameters"> <a name = "T2"> </a> 2. Params passing parameters and receiving parameters

 

<PRE class = "prettyprint" name = "code"> <code class = "hljs CS has-numbering"> parameter passing:
<SPAN class = "hljs-keyword"> This </span>. $ router. Push ({
Name: <SPAN class = "hljs-string"> 'xxx' </span>
<SPAN class = "hljs-keyword"> Params </span> :{
ID: ID
}
})

Receiving parameters:
<SPAN class = "hljs-keyword"> This </span>. $ route. <SPAN class = "hljs-keyword"> Params </span>. ID </code> <ul class = "pre-numbering" style = ""> <li style = "color: RGB (153,153,153 ); "> 1 </LI> <li style =" color: RGB (153,153,153); "> 2 </LI> <li style =" color: RGB (153,153,153 ); "> 3 </LI> <li style =" color: RGB (153,153,153); "> 4 </LI> <li style =" color: RGB (153,153,153 ); "> 5 </LI> <li style =" color: RGB (153,153,153); "> 6 </LI> <li style =" color: RGB (153,153,153 ); "> 7 </LI> <li style =" color: RGB (153,153,153); "> 8 </LI> <li style =" color: RGB (153,153,153 ); "> 9 </LI> <li style =" color: RGB (153,153,153); "> 10 </LI> </ul> </PRE>

<P> <code> Note: For Params parameter passing, push can only contain name: 'xxxx', not path: '/XXX', because Params can only use name to introduce routes, if path is written here, the receiving parameters page will be undefined !!! </Code> </P>

 

<H3 id = "In addition, there is another difference between the two. Simply put, query is equivalent to the request parameter displayed in the address bar when the GET request page jumps, while Params is equivalent to the POST request parameter and will not be displayed in the address bar."> <a name = "T3"> </a> In addition, there is another difference between the two. To put it bluntly, query is equivalent to a GET request. When a page is redirected, you can see the Request Parameters in the address bar, while Params is equivalent to a POST request, parameters are no longer displayed in the address bar

<P> </P>

<P> <strong> the road to vue self-learning has to be continued. The pitfall will continue to step on, And the next pitfall will be Shenma... </Strong> </P> </div>

Differences between Vue-router query and Params parameter passing (receiving parameters)