Vue 2 项目中路径传参的两种方式 params 与 query 的区别与使用方式

Vue Router 中 params 与 query 的区别详解

使用 Vue Router 进行页面跳转时，常需传递参数。params 和 query 是两种主要的传参方式，它们在路由配置、URL 表现、访问方式和适用场景上有所区别。

一、params 和 query的介绍

二、使用方式

1. 使用 params：路径参数

路由配置（router/index.js）

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  //  核心：定义动态参数 :id
  {
    path: '/user/:id',           // ←← 动态路径参数
    name: 'UserProfile',
    ***ponent: () => import('@/views/UserProfile.vue'),
    props: true                  // ←← 开启 props 传参（可选）
  },
  {
    path: '/post/:postId',
    name: 'PostDetail',
    ***ponent: () => import('@/views/PostDetail.vue'),
    props: false  //  ←← 不开启 可使用 this.$route.params.参数 的方式进行接收
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

页面跳转（编程式导航）

<!-- Home.vue -->
<template>
  <div>
    <button @click="goToUser">查看用户</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToUser() {
      // 核心：使用 name + params
      this.$router.push({
        name: 'UserProfile',
        params: { id: '1001' }    // ←← params 传参
      })
    }
  }
}
</script>

注意：不能使用 path + params，否则 params 会被忽略：
this.$router.push({ path: ‘/user’, params: { id: ‘1001’ } })
页面接收参数

<template>
  <div>
    <h2>用户ID: {{ id }}</h2>
    <p>（通过 props 接收）</p>
  </div>
</template>

<script>
export default {
  // 核心：通过 props 接收 params
  props: {
    id: {
      type: String,
      required: true
    }
  },
  created() {
    console.log('用户ID:', this.id) // 输出: 1001
    //通过 $route 直接访问
	 console.log(this.$route.params.id) // "1001"
  }
}
</script>

2. 使用 query：查询参数

路由配置（router/index.js）

const routes = [
  {
    path: '/search',
    name: 'SearchPage',
    ***ponent: () => import('@/views/SearchPage.vue'),
    props: true  // ←← 开启 props 传参
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    ***ponent: () => import('@/views/Dashboard.vue'),
    props: false // ←←不开启 props 传参，也可以使用this.$route.query.参数 的方式进行接收
   }
]

页面跳转

<template>
  <div>
    <button @click="search">执行搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: 'Vue',
      page: 1
    }
  },
  methods: {
    search() {
      // 核心：使用 query 传参（支持 name 或 path）
      this.$router.push({
        name: 'SearchPage',
        query: {
          keyword: this.keyword,
          page: this.page
        }
      })

      // 也可使用 path
      // this.$router.push({
      //   path: '/search',
      //   query: { keyword: 'Vue', page: 1 }
      // })
    }
  }
}
</script>

页面接收参数

<template>
  <div>
    <h2>搜索关键词: {{ keyword }}</h2>
    <p>页码: {{ page }}</p>
  </div>
</template>

<script>
export default {
  // 核心：通过 props 接收 query 参数
  props: {
    keyword: {
      type: String,
      default: ''
    },
    page: {
      type: [String, Number],
      default: 1
    }
  },
  created() {
    console.log('关键词:', this.keyword)
    console.log('页码:', this.page)
	  //通过 $route.query 获取参数
    console.log(this.$route.query.keyword) 
    console.log(this.$route.query.page)  
  }
}
</script>

三、props: true 是必须的吗？

通过实例发现props: true是可以选择性开启的。即使不设置 props: true，也可以通过 this.$route.query.xxx或this.$route.params.xxx 获取参数
props: true 是一种可选的优化手段，目的是：

1. 将路由参数作为组件 props 传入
2. 实现组件与 $route 的解耦
3. 提升组件的可复用性和可测试性

四、如何动态监听参数变化

当用户通过浏览器前进/后退或动态切换参数时，需监听 $route 变化。但props 模式下，props 值也会随之更新，无需额外监听。

<script>
export default {
  watch: {
    // 监听 params 变化
    '$route.params.id'(newId) {
      this.loadUserData(newId)
    },

    // 监听 query 变化
    '$route.query.tab'(newTab) {
      this.switchTab(newTab)
    }
  }
}
</script>