Query 路由传参
传递参数
编程式导航 使用 router push 或者 replace 的时候 改为对象形式新增 query 必须传入一个对象,会将 query 对象展示在 路由路径(url) 上
const toDetail = (item: Item) => {
router.push({
path: '/reg',
query: item
})
}
在地址中显示的传递的参数数据:
接受参数
使用 useRoute 的 query
import { useRoute } from 'vue-router';//注意这里用的是useRoute
const route = useRoute()
将参数进行取:
<div>品牌:{{ route.query.name }}</div>
<div>价格:{{ route.query.gender}}</div>
<div>ID:{{ route.query.id }}</div>
Params 路由传参
编程式导航 使用 router push 或者 replace 的时候 改为对象形式并且只能使用 name,path 无效,然后传入 params
const toDetail = (item: Item) => {
router.push({
name: 'Reg',//必须使用Name,params不能使用path去传
params: item
})
}
地址栏并没有任何信息
接受参数
使用 useRoute 的 params
注意:这里会有一个问题,用params接受传参时,刷新后参数会丢失,但是请看下面注解(最终看动态路由传参)
[!NOTE] Important Note
在 8 月份之后的 vue 中,若不把 params 参数写在路由路径中将不会在组件中得到 params 参数,所以说现在 params 参数也会显示在地址栏上了。不是弃用 params。
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
import { useRoute } from 'vue-router';
const route = useRoute()
<div>品牌:{{ route.params.name }}</div>
<div>价格:{{ route.params.gender}}</div>
<div>ID:{{ route.params.id }}</div>
~
~
~
为了解决刷新丢失数据问题:
1.params 参数写在路由路径中,路径地址例如下图:path:“/reg/:id”(id为自己所定义的值)
~
这样地址栏上参数也会显示出来,并且刷新并不会丢失数据
这样就解决了上面注解所提到的
动态路由传参
很多时候,我们需要将给定匹配模式的路由映射到同一个组件。
例如,我们可能有一个 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))
1.首先,从模块 “./list.json” 中导入变量 data。
2.然后,利用数组函数 find() 在 data 中找到符合条件的数据项。find() 函数接受一个判断函数作为参数,以确定是否匹配当前元素,并返回第一个满足条件的元素。在本例中,判断函数是 (v) => v.id === router.params.id,即如果当前元素的 id 属性等于路由参数中的 id 值,则说明该元素与请求相匹配。
3.最后,将匹配成功的元素作为结果返回。
二者的区别
- query 传参配置的是 path,而 params 传参配置的是 name,在 params 中配置 path 无效
- query 在路由配置不需要设置参数,而 params 必须设置
- query 传递的参数会显示在地址栏中
- params 传参刷新会无效,但是 query 会保存传递过来的值,刷新不变 ;
- 路由配置