Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to vue parameters", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to pass parameters" this article.

There are three ways for vue to pass parameters: 1, use the name attribute of the route to pass parameters, and receive parameters through "$route.name"; 2, pass parameters through the to attribute in router-link; 3, use path to match routing components, and use url to pass parameters.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The first one: using name to pass

In the past, there has been a name when configuring routing, but I don't know what its specific use is. In routing, it can be used to pass parameters. Write the name of the route in index.js

Receive parameters:

Add it to the page where we need to receive it

I am router-name: {{$route.name}}

For example, I received it here in APP.vue, and I want to see the parameters on every page I switch.

Look at the results:

But this method is not very common because we think it is not very regular.

Second: through the to attribute in router-link

Use to in router-link to pass parameters. Look at the syntax:

a. First: to needs to be bound

b. Pass parameters in a form similar to that of an object

C.name is the name we chose when configuring routing.

d. Parameters are also in the form of objects.

Do it in practice:

a. Change the path in to to the above in APP.vue

Hellovue page

Here we pay attention to the writing of to, preceded by a colon, because it is bound, pass a username and the value is tomcat

b. Configure hellovue in index.js with the name hellovue, which corresponds to the above name

C. Receive parameters in hellovue.vue

The name passed is: {{$route.params.username}}

Look at the results:

Third: use path to match routing components, and use url to pass parameters

Pass parameters in the form of colons in the routing file, which is the binding of parameters

A. Modify the path in index.js. Here we modify the myjob.vue component

B. Pass parameters in the App.vue component

C. Display what we want to show in the myjob.vue component (receive parameters)

D, look at the results

The above is all the contents of the article "how to transmit vue parameters". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.