Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the way of parameter transmission in vue router". In daily operation, I believe that many people have doubts about the way of parameter transmission in vue router. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "what is the way of parameter transmission in vue router?" Next, please follow the editor to study!

Vue-router passing parameters can be divided into two categories.

Programmatic navigation router.push

Declarative navigation

Programmatic navigation router.push

There are two types of parameters passed by programmatic navigation: strings and objects.

String

The way to use a string is to jump the routing address directly as a string, which is simple but cannot pass parameters:

This.$router.push ("home")

Object

If you want to pass parameters, you mainly write them in the way of objects, which are divided into two ways: named routing and query parameters. The usage and precautions of the two methods are described below.

Named route

The premise of a named route is that the route needs to be named at the place where the route is registered, such as:

Named route passing parameters need to be passed using params, so it is important to note that params is not query.

The target page uses params when receiving pass-through parameters

Special note: the parameters passed in this way will make an error if you refresh the target page.

The method of use is as follows:

This.$router.push ({name: 'news', params: {userId: 123}})

The code is as follows:

{{msg}} click here to news page export default {name: 'HelloWorld', data () {return {msg:' Welcome to Your Vue.js App'}}, methods: {routerTo () {this.$router.push ({name: 'news', params: {userId: 123}});}} accept the passed parameters: this is the news page.the transform param is {{this.$route.params.userId}}

The running effect is as follows:

Query parameters

In fact, the query parameters are followed by the routing address with parameters consistent with the traditional url parameters. The passed parameters use query and must be passed with path instead of name, and the parameters passed on the target page use query.

Note: params is paired with name and query is paired with path

The method of use is as follows:

This.$router.push ({path:'/ news', query: {userId: 123}); the code is as follows: {{msg}} click here to news page export default {name: 'HelloWorld', data () {return {msg:' Welcome to Your Vue.js App'}}, methods: {routerTo () {this.$router.push ({path:'/ news', query: {userId: 123}}) } receiving parameters are as follows: this is the news page.the transform param is {{this.$route.query.userId}}

The running effect is as follows:

Declarative navigation

Declarative navigation is the same as programming. I won't introduce you too much here. I'll give you a few examples to understand by programming.

Examples are as follows:

String

Click to news page

Named route

Click to news page

The running effect is as follows:

Query parameters

Click to news page

The running effect is as follows:

At this point, the study of "what is the way to pass parameters in vue router" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.