vue router三种方式传递参数

目录

1.直接在url后面加上参数名

2.用name属性进行传值 

3.用path属性进行传值

三者的区别 

---

1.直接在url后面加上参数名

设置

{
	path:'/detail/:id',    //注意这个位置，参数写在后头
	component:Detail
}

 传递

goodsClick(id){
   this.$router.push('/detail/'+id)  //传递的时候，记得加上变量
}
//或者这样写
goodsClick(id){
   this.$router.push({
      path:'/detail/'+id
   })
}

 获取

<template>
    <div>
      我是Detail
      {{$route.params.id}}  //params获取数据
    </div>
</template>

---

2.用name属性进行传值 

设置

{
	path:'/detail',
    name:'Detail',      //运用这个name属性进行跳转
	component:Detail
}

 传递

goodsClick(id){
    this.$router.push({
       name:'Detail',       //用name进行跳转
       params:{             //params属性传递参数
         id
       }
    })
}

获取

<template>
	<div>
	    我是Detail
        {{$route.params.id}}   //params获取数据
	</div>
</template>

---

3.用path属性进行传值

设置

{
	path:'/detail',   //运用这个path属性进行跳转 
	component:Detail
}

 传递

goodsClick(id){
    this.$router.push({
       path:'/detail',        //path进行跳转
       query:{               //query传递参数
          id
       }
    })
}

获取 

<template>
	<div>
	我是Detail
    {{$route.query.id}}        //注意，这里是query哦
	</div>
</template>

---

 三者的区别 

1.直接在url后面传值，用 $route.params 获取参数值

   参数在url后面显示，例: localhost:8080/detail/1lyp2vg ，直接跟着  

---

2.用name，params进行传参，用 $route.params 获取参数值

   参数在url后面不显示，例:localhost:8080/detail，

注：在刷新页面的时候，传递的值会丢失；

---

3.用path，query进行传参，用$route.query获取参数值

  参数在url后面显示，例: localhost:8080/detail?id=1m7jj7a   ?后key=value模式跟着，

---