路由params、query传参及区别

最新推荐文章于 2025-06-02 15:12:55 发布

原创最新推荐文章于 2025-06-02 15:12:55 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue中路由传参的两种方式：params和query，包括它们的定义、使用方法及区别。params传参在路径中显示，刷新页面会丢失；query传参显示在URL问号后，刷新后仍保留。在路由配置中，params需预先定义，query则无需。示例代码展示了如何在组件中进行传参和接收。总结了params和query的主要差异，params是路由的一部分，query是URL参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue路由如何使用params query传参，以及有什么区别

一、params、query是什么？

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params

query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query

二、路由（router.js）

路由设置这里，**当你使用params方法传参的时候，要在路由后面加参数名，**并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
在这里插入图片描述

注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，那依赖这个参数的http请求或者其他操作就会失败。

三、案例：

组件1：

<template>
  <div class="app_page">
    <h1>从这个路由传参到别的路由</h1>
    <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }}" >
      router-link跳转router1
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'app_page',
  data () {
    return {
      status:110,
      status2:120,
      status3:119
    }
  },
}
</script>

上面的router-link传参，也可以使用router文档里面的编程式导航来跳转传参。

this.$router.push({  name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }});
    //编程跳转写在一个函数里面，通过click等方法来触发

这两种传参效果是一模一样的，编程式导航，可以用来做判断跳转，比如是否授权，是否登录，等等状态

组件2：

<template>
  <div class="router1">
    <h1>接收参数的路由</h1>
    <h1> params.id：{{ $route.params }}</h1>
    <h1>query.status:{{ $route.query.queryId }}</h1>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>