Vue知识点：Router参数传递

直接在url后面加上参数名：

- 路由Router的设置

	{
		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>

---

用name属性进行传值：

- 路由Router的设置

	{
		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>

---

用path属性进行传值：

- 路由Router的设置

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

- 路由Router的设置

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

-  获取参数

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

---

总结：

提示：三种方法的区别

- 直接在url后面传值，用 $route.params 获取参数值
- 参数在url后面显示，例: localhost:8080/detail/1lyp2vg ，直接跟着  
-------------------------------------------------------------------------------------
- 用name，params进行传参，用 $route.params 获取参数值
- 参数在url后面不显示，例:localhost:8080/detail，
- 注：这种方法在刷新页面的时候，传递的值会丢失；
-------------------------------------------------------------------------------------
- 用path，query进行传参，用$route.query获取参数值
- 参数在url后面显示，例: localhost:8080/detail?id=1m7jj7a   ?后key=value模式跟着