vue路由的传参和跳转的三种方法

//方法一：
this.$router.push({ 
path:`/home/${id}`, 
})
{ 
//:id是占位的作用
path:"/home/:id",
name:"Home", 
component:Home
} 

在Home组件中获取参数值 this.$route.params.id

//方法二：
通过name来匹配路由，通过param来传递参数 
this.$router.push({ 
name:'Home', 
params:{ id:id } 
}) 
用params传递参数，不使用：/id 
{ 
path:'/home', 
name:Home, component:Home 
}
Home组件中获取参数 this.$route.params.id

//方法三：
this.$router.push({ 
path:'/home',
query:{ id:id } 
}) 
路由配置 
{ 
path:'/home', 
name:Home, 
component:Home
} 
获取参数的方法 this.$route.query.id

query和params的区别总结：

1. params传参，必须使用命名路由的方式传参；
2. params传参，不会显示在地址栏上，会保存在内存中，刷新会丢失，可以配合本地存储进行使用;
3. query的参数会显示在地址栏上，不会丢失；

转载至 乔巴不想说话