Vue路由传参数组（Vue路由传参三种方式）

Vue路由传参三种方式

params传参 路由属性配置传参 query传参

一            、params传参

this.$router.push({ name:"admin",　　　　 //这里的params是一个对象
  
  
  
  
  
  
，id是属性名 
  
  
  
  
  
 ，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 {　　 //组件路径 path: /admin,　　 //组件别名 name: admin,　　 //组件名 component: Admin, }

通过params传递参数 


 


 


 


 


 


 ，如果我们想获取 id 的参数值
 
 
 
 
 
 
，可以通过this.$route.params.id这种方式来打印出来就可以得到了；

注意：获取参数的时候是 $route  
   
   
   
   
   
 ，跳转和传参的时候是 $router

二  
 
  
 
  
 
  
 
  
 
  
 
 、路由属性配置传参：

this.$router.push({ name:"/admin/${item.id}", }) //这个组件对应的路由配置 { 　　 //组件路径 path: /admin:id, 　　 //组件别名 name: admin, 　　 //组件名 component: Admin, }

通过路由属性配置传参我们可以用this.$route.params.id来获取到 id 的值 

 

 

 

 

 

 ，

注意 this. $router.push 方法里面路径带的是值

 

 

 

 

 

 
，路由配置项那里带的是变量名(属性名)来实现的对应；

以上两种传参方式基本上可以理解为 ajax 中的 post 请求方式            ，参数都是不可见的 
 

 
 

 
 

 
 

 
 

 
 

 ，但是上面两种方法都有一个弊端












，就是当页面刷新了是获取不到参数值的                  ，那么有没有一种方法是页面刷新之后参数依然存在呢？

三












、query传参

this.$router.push({ name:"/admin",　　　　 query:{id：item.id} }) //这个组件对应的路由配置 { 　　 //组件路径 path: /admin, 　　 //组件别名 name: admin, 　　 //组件名 component: Admin, }

第三种方式是用 query 来传参 
 
 
 
 
 
 
 
 
 
 
 
 ，这种方式是可以解决页面刷新参数消失问题的


















，这种方式可以理解为是 ajax 中的 get 方法            ，参数是直接在 url 后面添加的 
 
  
 
  
 
  
 
  
 
  
 
  ，参数是可见的











，所以解决页面刷新参数消失问题建议使用此方法来解决；

区别

（1）params传参

只能用 name
  
  
  
  
  
  
，不能用 path
  
  
  
  
  
  
。

地址栏不显示参数名称 id 
  
  
  
  
  
 ，但是有参数的值 
  
  
  
  
  
 。

（2）query传参

name 和 path 都能用 


 


 


 


 


 


 。用 path 的时候 


 


 


 


 


 


 ，提供的 path 值必须是相对于根路径的相对路径
 
 
 
 
 
 
，而不是相对于父路由的相对路径  
   
   
   
   
   
 ，否则无法成功访问
 
 
 
 
 
 
。

地址栏显示参数格式为?id=0&code=1

Vue组件之间传参