Maison > interface Web > Voir.js > Utilisation des paramètres et de la requête dans vue

Utilisation des paramètres et de la requête dans vue

下次还敢
Libérer: 2024-04-30 03:00:32
original
1163 Les gens l'ont consulté

Dans Vue, les paramètres et les requêtes sont utilisés pour accéder aux fragments de routage dynamique et aux paramètres de chaîne de requête. L'objet params contient les valeurs du fragment de route dynamique, tandis que l'objet requête contient les paires paramètre et valeur dans la chaîne de requête. params fait partie de la route, mais la requête ne l'est pas, ce qui affecte la correspondance de la route. Vous pouvez accéder aux paramètres et aux requêtes via l'objet $route et les utiliser pour transmettre des données lors de la navigation.

Utilisation des paramètres et de la requête dans vue

Utilisation de params et de query dans Vueparamsquery 的用法

在 Vue 路由中,paramsquery 是两个密切相关的概念:

params

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

<code class="js">const User = {
  template: '<p>User ID: {{ $route.params.id }}</p>'
}</code>
Copier après la connexion

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

<code class="js">{ id: '123' }</code>
Copier après la connexion

query

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

<code class="js">const SearchResults = {
  template: '<p>Page: {{ $route.query.page }}</p>'
}</code>
Copier après la connexion

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

<code class="js">{ page: '2', sort: 'desc' }</code>
Copier après la connexion

区分 params 和 query

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

使用 params 和 query

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

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

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

总结

paramsquery

Dans le routage Vue, params et query sont deux concepts étroitement liés : l'objet 🎜🎜🎜params🎜🎜params contient la valeur du fragment dynamique de la route actuelle. Les fragments dynamiques sont nommés fragments qui portent le préfixe : dans le chemin de la route, tel que /user/:id. 🎜rrreee🎜Lorsqu'une route correspond à /user/123, $route.params contiendra les objets suivants : 🎜rrreee🎜🎜query🎜🎜 L'objet query contient les paramètres de la chaîne de requête d'itinéraire actuelle. La chaîne de requête est la paire paramètre et valeur après le numéro ? dans l'URL, par exemple ?page=2&sort=desc. 🎜rrreee🎜Lorsqu'une route correspond à /search?page=2&sort=desc, $route.query contiendra les objets suivants : 🎜rrreee🎜🎜Distinguer les paramètres et la requête🎜🎜Une différence clé entre params et query est que params fait partie d'une route, tandis que query non. Cela signifie que params affecte la correspondance de route, mais pas query. Par exemple, la route /user/:id ne correspondra qu'aux URL avec un paramètre id valide. Cependant, la route /search correspondra à n'importe quelle URL avec ou sans chaîne de requête. 🎜🎜🎜Utilisation de params et query🎜🎜Vous pouvez accéder aux objets params et query via l'objet $route. Pour la navigation, vous pouvez utiliser les méthodes $router.push ou $router.replace, qui prennent toutes deux en charge la transmission de params ou de query. objet. 🎜rrreee🎜🎜Résumé🎜🎜params et query sont des concepts importants dans le routage Vue et sont utilisés pour accéder aux fragments de route dynamiques et aux paramètres de chaîne de requête. Comprendre la différence entre les deux est crucial pour utiliser efficacement le routage Vue. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
vue
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal