Vue Router 中：route.params.id 和 route.query.id 的区别

路由参数 params 与 query 区别

---

在Vue Router中，route.params.id和route.query.id的主要区别在于参数来源和使用场景。

---

params.id来自URL路径（如/user/123），需预先定义路由配置，通常用于必选资源标识；

---

query.id来自查询字符串（如/user?id=123），无需定义，用于可选参数如筛选分页。

---

前者适合资源定位（看什么），后者用于操作资源（怎么看）。两者在刷新或分享时都不会丢失参数值。

---

route.params.id 和 route.query.id 的区别

---

示例

import {useRoute } from 'vue-router';

const route = useRoute();
console.log(route.params.id);
console.log(route.query.id);

---

在 Vue Router 中，route.params.id 和 route.query.id 的区别主要体现在数据的来源、URL 的表现形式以及使用场景上。

---

特性	route.params.id	route.query.id
数据来源	来自 URL 路径 中动态匹配的部分（路径参数）。	来自 URL 中 ? 号后面 的查询字符串（查询参数）。
URL 示例	/user/123 这里的 123 就是 params.id。	/user?id=123 这里的 123 就是 query.id。
定义方式	需要在路由配置中预先定义。	无需在路由配置中定义，任何页面都可以接收。
适用场景	必选参数 ，通常用于标识唯一资源 。 例如：文章详情页 /article/1，用户主页 /user/zhangsan。	可选参数 ，通常用于筛选、排序、分页 或携带额外信息 。 例如：商品列表页 /products?category=phone&page=2。
传递方式	通过路由路径拼接。	通过 URL 的 ?key=value 形式拼接。
是否必须	通常是必选的（除非配置了可选参数），如果缺少可能导致路由无法匹配。	是可选的，不会影响页面的路由匹配，只会影响页面内容。
刷新或分享 URL	刷新或分享后不会丢失，因为它是 URL 的一部分。	刷新或分享后不会丢失，因为它也是 URL 的一部分。
获取方式	route.params.id	route.query.id

---

route.params.id 需要在路由配置中预先定义

---

router/index.ts 路由

{//新建文章和编辑页面共用一个路由，根据是否有id参数来区分新建还是编辑
  path:"/createPost/:id?",//id参数可选
  name:"CreatePost",
  meta:{
    // requireLogin:是否需要登录
    requireLogin:true
  },
  component:()=>import('../views/CreatePost.vue')
}

route.query.id 无需在路由配置中定义，任何页面都可以接收

PostDetail.vue 文章详情页

<!-- 编辑和删除区域 -->
<div v-if="showEditArea" class="btn-group mt-5">
  <router-link type="button" class="btn btn-success" :to="{ name: 'CreatePost', query: { id: currentPost._id } }">
    编辑
  </router-link>
  <button type="button" class="btn btn-danger">删除</button>
</div>

---

总结

• params.id ：存在于路径中，用于定位资源（看什么）。

• query.id ：存在于查询字符串中，用于对资源进行额外操作（怎么看）。