What does vue dynamic routing mean?

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

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What does vue dynamic routing mean

Understanding of dynamic routing

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

For example: there is a component of Goods, and we need to map different product IDs to this component. At this time, dynamic routing is needed.

Configuration of dynamic routing

You can pass dynamic parameters in two ways:
(1), params
(2), query

Note: The following code demonstrations are all in history routing mode

Parameter passing in params mode

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

//index.js中配置路由信息
const routes = [{
    path: '/goods/:id',
    component: Goods}]

When routing jumps, it is divided into:

(1) Use the router-link method to implement route jump
In this method, you can use a string, after the path Directly follow the corresponding value, such as:

Second, you can use the object method, such as:

Note:

• params method , the way the to attribute uses objects, the route must be introduced by the name attribute, and path cannot be used.
• When passing parameters in the params method, the attribute name must be consistent with the dynamic parameter name when configuring routing, otherwise an error will be reported.
  (2) Use the $router method to jump to the route

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

Parameters are passed in the params method. The corresponding url address after the parameters are passed is as follows:

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

$route.params.id

Parameter passing in query mode

Configuration When routing, normal configuration is enough, that is, how you configured routing originally, you still configure it now. For example:

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

When routing jumps, it is divided into:
(1) Use the router-link method to implement route jump
The query parameters can only be passed through objects, and strings cannot be used.

<router-link>商品</router-link>

(2) Use the $router method to jump to the route

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

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

The parameter is passed in the query method, and the corresponding url address after the parameter is passed is displayed as:

Note: When passing parameters in query mode, the attribute name (such as id in this example) in the query object can be named arbitrarily, unlike when passing parameters in params mode, it is restricted.
At the same time, routes can be introduced in this way using either the path attribute or the name attribute.
How to get parameters:
$route.query, if you want to get the id value in this example, the code is:

$route.query.id

In short, be sure to pay attention to:
(1), Only name can be used to introduce routes in params mode, and name and path can be used to introduce routes in query mode.
(2). Use "router" for routing jumps; use "route" to obtain parameters

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of What does vue dynamic routing mean?. For more information, please follow other related articles on the PHP Chinese website!