【vue2.0】vue-router路由传参

vue-router 路由传参
路由传参两种：params（/user/abc）、query（/user?id=abc）

1、 params：以路由拼接方式（动态路由）

第一步：在路由跳转阶段拼接路径；（router-link与普通事件两种）

<router-link :to="'/user/'+userId" >
用户</router-link>
&&
this.$router.push('/user/'+this.userId)
---
第二种方式：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})

 第二步：路由配置中接受拼接；

{ 
	path:'/user/:id',
	name:User,
	component:User 
}

 第三步：组件内使用；

{{$route.params.id}}
&&
computed:{
	userId(){
		return this.$route.params.id
	}
}

2、 query：以传统query方式

第一步：在路由跳转阶段传递query对象；（两种）

<router-link :to="{ path:'/profile',query:{name:'zzz',age:12}}" >
档案</router-link>
&&
this.$router.push({ 
	path:'/profile',
	query:{name:'zzz',age:12}
})

第二步：路由配置中不需要特殊操作；

{ path:'/profile',name:Profile,component:Profile }

第三步：组件内使用；

<div>{{$route.query.name}}</div>
&&
computed:{
	userName(){
		return this.$route.query.name
	} 
}