vue路由传参方式总结

1. params传参

路由中设置
{
  path:"/home/:id",
  name:"home",
  components:Home
}

• router-link传参

<router-link :to="'/home/'+id"><router-link>

• 编程式路由传参

 const router=useRouter();
 
 方法一：router.push({path:`/home/${id}`}
 
 方法二：router.push({name:"home",params:{id:1}})  //,url中不显示参数，刷新后参数消失

2. query传参

路由中设置
{
  path:"/home",
  name:"home",
  components:Home
}

• router-link传参

<router-link :to="{path:"/home",query:{id:1}}"><router-link>
或
<router-link :to="/path?id=1"><router-link>

• 编程式路由传参

 const router=useRouter();
 
 方法一：router.push({path:"/home",query:{id:1}})
 
 方法二：router.push({name:"home",query:{id:1}})  //,url中不显示参数，刷新后参数丢失