路由的传递参数vue-router的query和params

一、params参数传递

1.配置路由，声明接收params参数

{
	path:'home',
	componet:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',//这里可以用detail,用xiangqing是为了下面区分写法辨认
					path:'detail/:id/:title',//如果用params直接传递参数，则需要使用占位符
					component:Detail
				}
			]
		},
	]
}

2、传递参数

 - 跳转并携带参数，字符串写法
 	<router-link :to="/home/message/detail/666/你好">跳转</router-link>
 - 跳转并且携带参数，对象写法
 	<router-link :to=
 	"{
		name:'xiangqing'，
		params：{
			id:666,
			title:'你好'
		}
	}"
 	>跳转</router-link>

特别注意，路由携带params参数的时候，如果使用to的对象写法，则不能使用path配置项，必须使用name配置
3.接收参数

$route.params.id
$route.params.title

二、路由的query参数

1、传递参数

 - 跳转并携带参数，字符串写法
 	<router-link :to="/home/message/detail？id=666&title=你好">跳转</router-link>
 - 跳转并且携带参数，对象写法
 	<router-link :to=
 	"{
		path:'/home/message/detail'，
		query：{
			id:666,
			title:'你好'
		}
	}"
 	>跳转</router-link>

2.接收参数

$route.query.id
$route.query.title