Query路由传参
编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象
const toDetail = (item: Item) => {
router.push({
path: '/reg',
query: item
})
}
接受参数
使用 useRoute 的 query
import { useRoute } from 'vue-router';
const route = useRoute()
<div>品牌:{{ route.query?.name }}</div>
<div>价格:{{ route.query?.price }}</div>
<div>ID:{{ route.query?.id }}</div>
Params路由传参
编程式导航 使用router push 或者 replace 的时候 改为对象形式并且只能使用name,path无效,然后传入params
const toDetail = (item: Item) => {
router.push({
name: 'Reg',
params: item
})
}
接受参数
使用 useRoute 的 params
import { useRoute } from 'vue-router';
const route = useRoute()
<div>品牌:{{ route.params?.name }}</div>
<div>价格:{{ route.params?.price }}</div>
<div>ID:{{ route.params?.id }}</div>
动态路由传参
很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User
组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数
路径参数 用冒号 :
表示。当一个路由被匹配时,它的 params 的值将在每个组件
const routes:Array<RouteRecordRaw> = [
{
path:"/",
name:"Login",
component:()=> import('../components/login.vue')
},
{
//动态路由参数
path:"/reg/:id",
name:"Reg",
component:()=> import('../components/reg.vue')
}
]
const toDetail = (item: Item) => {
router.push({
name: 'Reg',
params: {
id: item.id
}
})
}
import { useRoute } from 'vue-router';
import { data } from './list.json'
const route = useRoute()
const item = data.find(v => v.id === Number(route.params.id))
二者的区别
-
query 传参配置的是 path,而 params 传参配置的是name,在 params中配置 path 无效
-
query 在路由配置不需要设置参数,而 params 必须设置
-
query 传递的参数会显示在地址栏中
-
params传参刷新会无效,但是 query 会保存传递过来的值,刷新不变 ;
-
路由配置