vue路由跳转传递参数的⽅式总结
⽇常业务中，路由跳转的同时传递参数是⽐较常见的，传参的⽅式有三种：
1）通过动态路由⽅式
//路由配置⽂件中配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳转时页⾯
var id = 1;
this.$router.push('/detail/' + id)
//跳转后页⾯获取参数
this.$route.params.id
2）通过query属性传值
//路由配置⽂件中
{
path: '/detail',
name: 'Detail',
component: Detailreact router 跳转
}
//跳转时页⾯
this.$router.push({
path: '/detail',
query: {
name: '张三'，
id: 1,
}
})
//跳转后页⾯获取参数对象
this.$route.query
3）通过params属性传值
//路由配置⽂件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页⾯
this.$router.push({
name: 'Detail',
params: {
name: '张三'，
id: 1,
}
})
//跳转后页⾯获取参数对象
this.$route.params
总结：
1.动态路由和query属性传值页⾯刷新参数不会丢失， params会丢失
2.动态路由⼀般⽤来传⼀个参数时居多(如详情页的id), query、params可以传递⼀个也可以传递多个参数。补充⽅法：
页⾯刷新数据不会丢失
methods：{
insurance(id) {
//直接调⽤$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}
需要对应路由配置如下：
this.$route.params.id
到此这篇关于vue路由跳转传递参数的⽅式总结的⽂章就介绍到这了，更多相关vue路由跳转传递参数的三种⽅式内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。