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

Today, I would like to share with you what vue dynamic routing refers to how to configure the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

In vue, dynamic routing is to map routes matching a certain pattern to the same component, and the essence of dynamic routing is to pass parameters through url; dynamic parameters can be passed through "params" and "query".

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What does vue dynamic routing mean? understanding of dynamic routing

Dynamic routing is to map routes that match a certain pattern to the same component. In fact, the essence is to pass parameters through url.

For example, if there is a component of merchandise Goods, we need to map different merchandise id to this component, so dynamic routing is needed.

Configuration of dynamic routin

You can pass dynamic parameters in two ways:

(1), params

(2), query

Note: the following code is demonstrated in history routing mode

Parameter transfer in params mode

How to configure routing: use colons: bind dynamic parameters.

/ / configure routing information in index.js const routes = [{path:'/ goods/:id', component: Goods}]

When a route jumps, it is divided into:

(1) use router-link to realize route hopping

In this way, a string can be used to follow the corresponding value directly after the path, such as:

Second, the way objects can be used, such as:

Note:

In the params method, the to property uses the object and must be routed by the name property, not path.

When passing parameters by the params method, the property name must be the same as the dynamic parameter name when routing is configured, otherwise an error is reported.

(2) use $router to redirect the route

/ / method 1 this.$router.push ('/ goods/' + this.goodsId) / / method 2 this.$router.push ({name: 'goods', params: {id: this.goodsId}})

Pass parameters in params mode, and the corresponding url address after passing parameters is as follows:

How to get the parameters:

$router.params. For example, if you want to get the value of id in this example, the corresponding code is:

Parameter transfer in $route.params.idquery mode

When configuring routing, you can configure it in general, that is, how to configure routing in the past, and how to configure it now. Such as:

Const routes = [{path:'/ goods', name: 'goods', component: Goods}]

When a route jumps, it is divided into:

(1) use router-link to realize route hopping

Query can only pass parameters through objects, not strings.

Merchandise

(2) use $router to redirect the route

This.$router.push ({path:'/ goods', query: {id: this.goodsId}}) this.$router.push ({path:'/ goods', query: {id: this.goodsId}})

Pass parameters in query mode, and the corresponding url address after passing parameters is displayed as follows:

Note: for passing parameters in query mode, the property names in the query object (such as id in this example) can be named freely, unlike the restrictions when passing parameters in params mode.

At the same time, the introduction of routing in this way can use either the path attribute or the name attribute.

How to get the parameters:

$route.query, such as if you want to get the id value in this example, the code is:

$route.query.id

In short, we must pay attention to:

(1) the introduction of params routing can only use name,query routing. Name and path can be used to introduce routing.

(2) use "router" for route redirection and "route" for getting parameters.

These are all the contents of the article "what does vue dynamic routing mean and how to configure it?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.