vue에서 매개변수 및 쿼리 사용

Vue에서는 매개변수와 쿼리를 사용하여 동적 라우팅 조각과 쿼리 문자열 매개변수에 액세스합니다. params 객체에는 동적 경로 조각의 값이 포함되고, 쿼리 객체에는 쿼리 문자열의 매개변수와 값 쌍이 포함됩니다. params는 경로의 일부이지만 쿼리는 경로 일치에 영향을 미치는 쿼리가 아닙니다. $route 객체를 통해 매개변수 및 쿼리에 액세스하고 이를 사용하여 탐색할 때 데이터를 전달할 수 있습니다.

Vue의 params 및 query 사용params 和 query 的用法

在 Vue 路由中，params 和 query 是两个密切相关的概念：

params

params 对象包含当前路由的动态片段的值。动态片段是在路由的路径中使用 : 前缀的命名片段，如 /user/:id。

<code class="js">const User = {
  template: '<p>User ID: {{ $route.params.id }}</p>'
}</code>

当路由匹配 /user/123 时，$route.params 将包含以下对象：

<code class="js">{ id: '123' }</code>

query

query 对象包含当前路由查询字符串中的参数。查询字符串是 URL 中 ? 号后面的参数和值对，如 ?page=2&sort=desc。

<code class="js">const SearchResults = {
  template: '<p>Page: {{ $route.query.page }}</p>'
}</code>

当路由匹配 /search?page=2&sort=desc 时，$route.query 将包含以下对象：

<code class="js">{ page: '2', sort: 'desc' }</code>

区分 params 和 query

params 和 query 之间的一个关键区别是，params 是路由的一部分，而 query 不是。这意味着 params 会影响路由匹配，而 query 不会。例如，路由 /user/:id 只会匹配具有有效 id 参数的 URL。但是，/search 路由将匹配任何带有或不带有查询字符串的 URL。

使用 params 和 query

你可以通过 $route 对象访问 params 和 query 对象。对于导航，可以使用 $router.push 或 $router.replace 方法，这两个方法都支持传递 params 或 query 对象。

<code class="js">// 使用 params 导航
this.$router.push({ name: 'user', params: { id: '123' } })

// 使用 query 导航
this.$router.push({ name: 'search', query: { page: 2, sort: 'desc' } })</code>

总结

params 和 query

In Vue 라우팅, params 및 query는 밀접하게 관련된 두 가지 개념입니다. 🎜🎜🎜params🎜🎜params 객체에는 현재 경로의 동적 조각 값이 포함되어 있습니다. 동적 조각은 경로 경로에 : 접두사가 붙은 명명된 조각입니다(예: /user/:id). 🎜rrreee🎜경로가 /user/123와 일치하면 $route.params에 다음 개체가 포함됩니다: 🎜rrreee🎜🎜query🎜🎜 쿼리 개체에는 현재 경로 쿼리 문자열의 매개변수가 포함되어 있습니다. 쿼리 문자열은 ?page=2&sort=desc와 같이 URL에서 ? 숫자 뒤의 매개변수와 값 쌍입니다. 🎜rrreee🎜경로가 /search?page=2&sort=desc와 일치하면 $route.query에 다음 개체가 포함됩니다. 🎜rrreee🎜🎜매개변수와 쿼리 구별🎜🎜 params와 query의 주요 차이점은 params는 경로의 일부인 반면 query는 > 아니요. 즉, params는 경로 일치에 영향을 주지만 query는 그렇지 않습니다. 예를 들어 /user/:id 경로는 유효한 id 매개변수가 있는 URL과만 일치합니다. 그러나 /search 경로는 쿼리 문자열이 있거나 없는 모든 URL과 일치합니다. 🎜🎜🎜매개변수 및 쿼리 사용🎜🎜 $route 개체를 통해 params 및 query 개체에 액세스할 수 있습니다. 탐색의 경우 params 또는 쿼리 전달을 지원하는 <code>$router.push 또는 $router.replace 메서드를 사용할 수 있습니다. 객체. 🎜rrreee🎜🎜요약🎜🎜params 및 query는 Vue 라우팅에서 중요한 개념이며 동적 경로 조각 및 쿼리 문자열 매개변수에 액세스하는 데 사용됩니다. Vue 라우팅을 효과적으로 사용하려면 둘 사이의 차이점을 이해하는 것이 중요합니다. 🎜

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