vue3里路由传参的两种形式——query和params区分

query查询参数（Query Parameters）

在使用router.push()的时候:

import {
    
     useRouter } from 'vue-router';
const router = useRouter()
const goToIndex= (item: Item) => {
    
    
    router.push({
    
    
        path: '/index',
        query: item
    })
}

在接收的时候：

import {
    
     useRoute } from 'vue-router';
const route = useRoute()
console.log(route.query) // route.query==item

也可以直接字符串拼接：

router.push({
    
    
        path: `/index?id=${
      
      user.id}&keywords='传递参数'`})

在接收的时候：

import {
    
     useRoute } from 'vue-router';
const route = useRoute()
console.log(route.query.id) // route.query.id==user.id
console.log(route.query.keywords) // route.query.keywords=='传递参数'

注意区分 useRouter() 和 useRoute() 的作用，前者用于路由跳转，后者用于获取路由相关信息如参数、路由路径path等

params传参

使用router.push()或者 router.replace() 的时候，改为对象形式并且只能使用name，path无效，然后传入params

// 路由定义，在router/index.js配置
const routes = [
  {
    
    
    path: '/user/:id', // 冒号后面的id是动态参数
    name: 'user',
    component: User
  }
];
index.vue
// 路由跳转
router.push({
    
     name: 'user', params: {
    
     id: 123 } });

query传参和params传参的区别

• query（查询参数）：
  • 查询参数不是 URL 的结构部分，它们不会影响 URL 的基本结构
  • 查询参数是通过问号（?）后跟键值对形式的字符串附加在 URL 上的，用于传递非主路径的额外信息，如搜索条件或分页信息。例：/search?keyword=vue&page=1。
  • 查询参数在路由跳转时可以通过对象的形式传递，例如 { path: '/search', query: { keyword: 'vue', page: 1 } }
• params（路径参数）：
  • 路径参数在 URL 中是可见的，并且是 URL 的一部分
  • 路径参数是嵌入在路由路径中的，它们通常用于标识特定的资源，如用户 ID 或文章的 slug。例：/users/:id
  • 路径参数在路由跳转时通常通过对象的形式传递，例如 { name: 'user', params: { id: 123 } }