Verwendung von Parametern und Abfragen in Vue

In Vue werden Parameter und Abfragen verwendet, um auf dynamische Routing-Fragmente und Abfragezeichenfolgenparameter zuzugreifen. Das Params-Objekt enthält die Werte des dynamischen Routenfragments, während das Abfrageobjekt die Parameter- und Wertepaare in der Abfragezeichenfolge enthält. params ist Teil der Route, query jedoch nicht, was sich auf den Routenabgleich auswirkt. Sie können über das $route-Objekt auf Parameter und Abfragen zugreifen und diese zum Übergeben von Daten beim Navigieren verwenden.

Verwendung von params und query in Vueparams 和 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

Beim Vue-Routing params und query sind zwei eng verwandte Konzepte: 🎜🎜🎜params🎜🎜params-Objekt enthält den Wert des dynamischen Fragments der aktuellen Route. Dynamische Fragmente sind benannte Fragmente, denen im Pfad der Route das Präfix : vorangestellt ist, z. B. /user/:id. 🎜rrreee🎜Wenn eine Route mit /user/123 übereinstimmt, enthält $route.params die folgenden Objekte: 🎜rrreee🎜🎜query🎜🎜 Das query -Objekt enthält die Parameter in der aktuellen Routenabfragezeichenfolge. Die Abfragezeichenfolge ist das Parameter-Wert-Paar nach der ?-Nummer in der URL, z. B. ?page=2&sort=desc. 🎜rrreee🎜Wenn eine Route mit /search?page=2&sort=desc übereinstimmt, enthält $route.query die folgenden Objekte: 🎜rrreee🎜🎜Unterscheiden Sie zwischen Parametern und Abfrage🎜🎜Ein wesentlicher Unterschied zwischen params und query besteht darin, dass params Teil einer Route ist, während query nein. Das bedeutet, dass params den Routenabgleich beeinflusst, query jedoch nicht. Beispielsweise stimmt die Route /user/:id nur mit URLs mit einem gültigen id-Parameter überein. Die Route /search stimmt jedoch mit jeder URL mit oder ohne Abfragezeichenfolge überein. 🎜🎜🎜Verwenden von Parametern und Abfragen🎜🎜Sie können über das Objekt $route auf die Objekte params und query zugreifen. Für die Navigation können Sie die Methoden $router.push oder $router.replace verwenden, die beide die Übergabe von params oder query unterstützen Objekt. 🎜rrreee🎜🎜Zusammenfassung🎜🎜params und query sind wichtige Konzepte im Vue-Routing und werden für den Zugriff auf dynamische Routenfragmente und Abfragezeichenfolgenparameter verwendet. Um das Vue-Routing effektiv nutzen zu können, ist es wichtig, den Unterschied zwischen beiden zu verstehen. 🎜

Das obige ist der detaillierte Inhalt vonVerwendung von Parametern und Abfragen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!