vue中params和query的用法

在 vue 中，params 和 query 用于访问动态路由片段和查询字符串参数。params 对象包含动态路由片段的值，而 query 对象包含查询字符串中的参数和值对。params 是路由的一部分，而 query 不是，这影响了路由匹配。你可以通过 $route 对象访问 params 和 query，并在导航时使用它们传递数据。

Vue 中 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 是 Vue 路由中的重要概念，用于访问动态路由片段和查询字符串参数。理解这两者之间的区别对于有效地使用 Vue 路由至关重要。

以上就是vue中params和query的用法的详细内容，更多请关注叮当号网其它相关文章！