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 } }
- 路径参数在 URL 中是可见的,并且是