Vue Router 中 params 和 query 的区别

在 Vue Router 中,paramsquery 是两种不同的传递参数的方式,它们有以下主要区别:

1. 定义方式不同

params

  • 需要在路由路径中定义参数名
  • 适合传递必要参数(如ID)

javascript

复制

arduino 复制代码
// 路由配置
{
  path: '/user/:id',
  name: 'user',
  component: User
}

query

  • 不需要在路由路径中定义
  • 适合传递可选参数(如搜索条件)

javascript

复制

arduino 复制代码
// 路由配置
{
  path: '/search',
  name: 'search',
  component: Search
}

2. URL 表现形式不同

params

  • 参数是路径的一部分
  • 示例URL: /user/123
  • 不显示参数名

query

  • 参数在问号后以键值对形式出现
  • 示例URL: /search?name=john&age=25
  • 显示参数名和值

3. 使用方法不同

传递 params

javascript

复制

php 复制代码
// 编程式导航
router.push({ name: 'user', params: { id: 123 } })

// 声明式导航
<router-link :to="{ name: 'user', params: { id: 123 }}">用户</router-link>

传递 query

javascript

复制

php 复制代码
// 编程式导航
router.push({ path: '/search', query: { name: 'john', age: 25 } })

// 声明式导航
<router-link :to="{ path: '/search', query: { name: 'john', age: 25 }}">搜索</router-link>

4. 获取方式不同

获取 params

javascript

复制

csharp 复制代码
// 在组件中
this.$route.params.id
// 组合式API
import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.params.id

获取 query

javascript

复制

kotlin 复制代码
// 在组件中
this.$route.query.name
// 组合式API
const name = route.query.name

5. 其他重要区别

特性 params query
是否必须定义 是(在路由配置中)
刷新后 可能丢失(除非使用命名路由) 保留
SEO影响 较小(看起来像静态路径) 较大(可能被搜索引擎索引)
参数可见性 隐藏 明文显示
长度限制 受URL总长度限制 受URL总长度限制

使用场景建议

  • 使用 params 当

    • 参数是资源标识(如用户ID)
    • 参数是必需的
    • 希望URL更简洁
  • 使用 query 当

    • 参数是可选的(如分页、筛选条件)
    • 需要分享带参数的URL
    • 参数需要被搜索引擎抓取

注意事项

  1. 使用 params 时,如果使用 path 而不是 name 进行导航,params 会被忽略:

    javascript

    复制

    php 复制代码
    // 这样不会工作
    router.push({ path: '/user', params: { id: 123 } })
    
    // 这样才有效
    router.push({ name: 'user', params: { id: 123 } })
  2. 在 Vue Router 4.x 中,如果没有在路由中定义 params 参数,它们将不会被添加到 URL 中。

  3. query 参数总是字符串类型,如果需要其他类型需要手动转换。

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴4 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript