Vue3 中路由 query 的全面解析与应用

最新推荐文章于 2025-04-08 18:12:37 发布

阿贾克斯的黎明

最新推荐文章于 2025-04-08 18:12:37 发布

阅读量790

点赞数 10

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_57836225/article/details/145799127

版权

前端专栏收录该内容

507 篇文章

订阅专栏

Vue3 中路由 query 的全面解析与应用

一、什么是路由 query

二、在 Vue3 中使用路由 query 传递参数

（一）在模板中传递 query 参数

（二）在 JavaScript 代码中传递 query 参数

三、在目标组件中接收路由 query 参数

在 Vue3 的项目开发里，路由是构建单页面应用（SPA）的关键部分，而路由query作为传递参数的重要方式，掌握它的使用技巧对开发者来说十分必要。这篇文章就带大家深入了解 Vue3 里路由query的用法，还会给出详细代码示例。

一、什么是路由 query

在 Vue Router 中，路由query是一种在 URL 中传递参数的方式。它通过在 URL 的路径后面添加?，然后以key=value的形式传递参数，多个参数之间用&连接。比如/home?name=John&age=25，这里name和age就是通过query传递的参数。和路由params不同，query参数不会改变 URL 的路径结构，只是作为额外的数据附加在 URL 后面，而且query参数是可选的，不影响路由的匹配。

二、在 Vue3 中使用路由 query 传递参数

（一）在模板中传递 query 参数

在 Vue 组件的模板里，使用<router - link>标签来传递query参数非常简单。假设我们有一个文章列表页面，点击每篇文章的标题要跳转到文章详情页，同时传递文章的id和title参数。示例代码如下：

<template>
  <div>
    <ul>
      <li v - for="article in articles" :key="article.id">
        <router - link :to="{ path: '/article', query: { id: article.id, title: article.title } }">
          {{ article.title }}
        </router - link>
      </li>
    </ul>
  </div>
</template>

<script setup>
const articles = [
  { id: 1, title: 'Vue3路由query详解' },
  { id: 2, title: '深入理解Vue3响应式原理' }
];
</script>

在上面的代码里，:to属性绑定了一个对象，对象里path指定了目标路由的路径，query属性则设置了要传递的参数。这样点击文章标题时，就会跳转到/article路径，并带上id和title参数。

（二）在 JavaScript 代码中传递 query 参数

除了在模板里，在 JavaScript 代码中也能通过编程式导航传递query参数。还是以上面的文章列表和详情页为例，在方法里实现跳转并传递参数：

<template>
  <div>
    <ul>
      <li v - for="article in articles" :key="article.id" @click="goToArticle(article)">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRouter } from 'vue - router';

const articles = [
  { id: 1, title: 'Vue3路由query详解' },
  { id: 2, title: '深入理解Vue3响应式原理' }
];
const router = useRouter();

const goToArticle = (article) => {
  router.push({ path: '/article', query: { id: article.id, title: article.title } });
};
</script>

这里通过useRouter函数获取到router实例，然后调用router.push方法，同样在query属性里设置参数，达到和模板中<router - link>一样的效果。

三、在目标组件中接收路由 query 参数

在目标组件里接收query参数也很容易。继续以文章详情页为例，获取传递过来的id和title参数：

<template>
  <div>
    <h1>{{ articleTitle }}</h1>
    <p>文章ID：{{ articleId }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue - router';

const route = useRoute();
const articleId = route.query.id;
const articleTitle = route.query.title;
</script>

在这个代码中，使用useRoute函数获取到当前的路由信息，然后从route.query对象中获取传递过来的参数，分别赋值给articleId和articleTitle变量，这样就能在组件中使用这些参数了。

四、路由 query 的应用场景

（一）搜索结果页面

在电商网站或者资讯类网站中，搜索功能很常用。当用户输入关键词进行搜索后，搜索结果页面的 URL 可以通过query参数传递搜索关键词。比如在搜索框输入 “Vue3 教程”，跳转到搜索结果页面的 URL 可能是/search?keyword=Vue3教程。在搜索结果组件里接收keyword参数，根据这个关键词去请求后端接口获取相应的数据并展示。

（二）多条件筛选页面

假设一个商品列表页面，支持按照价格、类别等多个条件筛选商品。筛选条件可以通过query参数传递，比如/products?minPrice=100&maxPrice=500&category=electronics。这样用户在筛选后，刷新页面或者分享链接时，筛选条件依然有效，方便用户操作和页面状态的保持。

五、注意事项

（一）参数类型问题

通过query传递的参数，在route.query中获取到的都是字符串类型。如果需要使用其他类型（比如数字），要进行类型转换。例如，从query获取的id是字符串，在需要进行数值计算时，要使用parseInt或者Number函数进行转换：

<template>
  <div>
    <p>文章ID（转换后）：{{ parseInt(articleId) }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue - router';

const route = useRoute();
const articleId = route.query.id;
</script>