Vue에서 쿼리 및 매개변수의 역할

Vue 라우팅에서 쿼리는 /products?page=2&sort=price와 같이 페이지 경로에 영향을 주지 않는 추가 정보를 전달하는 데 사용됩니다. params는 /products/와 같은 페이지 경로의 매개변수 부분을 정의하는 데 사용됩니다. :ID.

Vue에서 쿼리와 매개변수의 역할

Vue 라우팅에서 query와 params는 서로 다른 역할을 하며 서로 다른 목적으로 사용됩니다. query 和 params 扮演着不同的角色，用于不同的目的。

query

• 作用：在 URL 中传递附加信息，该信息不会影响页面路线本身。
• 语法：this.$route.query[参数名称]
• 用法：通常用于传递过滤器、分页或搜索信息，例如：

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

在组件中，可以使用 query 对象访问这些附加参数：

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

params

• 作用：定义特定页面路线的参数部分，用于匹配和渲染对应的组件。
• 语法：this.$route.params[参数名称]
• 用法：params 用于从 URL 路径中提取动态参数，例如：

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

在组件中，可以使用 params 对象访问这些动态参数：

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

总结

query 和 params 在 Vue 路由中具有不同的用途。query 用于传递附加信息，而 params

🎜query🎜🎜

• 🎜역할: 🎜페이지 경로 자체에 영향을 주지 않는 추가 정보를 URL에 전달합니다.
• 🎜구문: 🎜this.$route.query[매개변수 이름]
• 🎜사용법: 🎜보통 필터, 페이징 또는 검색 정보를 전달하는 데 사용됩니다. 예:

rrreee🎜구성 요소에서 query 개체를 사용하여 다음 추가 매개변수에 액세스할 수 있습니다. 🎜rrreee🎜🎜params🎜🎜

• 🎜 기능: 🎜 특정 페이지 경로를 정의하고 해당 구성 요소를 일치시키고 렌더링하는 데 사용되는 매개 변수 섹션입니다.
• 🎜구문: 🎜this.$route.params[매개변수 이름]
• 🎜사용법: 🎜params는 다음에서 사용됩니다. URL 경로에서 동적 매개변수를 추출합니다. 예:

rrreee🎜구성 요소에서 params 개체를 사용하여 다음 동적 매개변수에 액세스할 수 있습니다. 🎜rrreee🎜🎜Summary🎜 🎜🎜 쿼리와 params는 Vue 라우팅에서 서로 다른 목적을 가지고 있습니다. query는 추가 정보를 전달하는 데 사용되는 반면, params는 페이지 경로의 매개변수 부분을 정의하는 데 사용됩니다. 목적을 이해하면 Vue 애플리케이션에서 URL과 경로를 효과적으로 관리할 수 있습니다. 🎜

위 내용은 Vue에서 쿼리 및 매개변수의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!