The role of query and params in vue

In Vue routing, query is used to pass additional information that does not affect the page route, such as /products?page=2&sort=price; params is used to define the parameter part of the page route, such as /products/:id.

The role of query and params in Vue

In Vue routing, query and params Play different roles and serve different purposes.

query

• Function: Pass additional information in the URL that does not affect the page route itself.
• Syntax: this.$route.query[parameter name]
• Usage: Usually used to pass filters , paging, or searching for information, for example:

<code>/products?page=2&sort=price</code>

In the component, these additional parameters can be accessed using the query object:

<code class="javascript">export default {
  data() {
    return {
      currentPage: this.$route.query.page,
      sortOrder: this.$route.query.sort,
    }
  }
}</code>

params

• Function: Define the parameter part of a specific page route, which is used to match and render the corresponding components.
• Syntax: this.$route.params[parameter name]
• Usage: params Used to extract dynamic parameters from the URL path, for example:

<code>/products/:id</code>

In the component, you can use the params object to access these dynamic parameters:

<code class="javascript">export default {
  data() {
    return {
      productId: this.$route.params.id,
    }
  }
}</code>

Summary

query and params have different purposes in Vue routing. query is used to pass additional information, while params is used to define the parameter portion of the page route. By understanding their purpose, you can effectively manage URLs and routes in your Vue application.

The above is the detailed content of The role of query and params in vue. For more information, please follow other related articles on the PHP Chinese website!