Vue 路由的params参数

1.路由的params参数

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

routes:[
		{
			path:'/about',
			component:About
		},
		{
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail/:id/:title', //使用占位声明接收params参数
							component:Detail,
						}
					]
				}
			]
		}
	]
})

2.传递参数

// 跳转路由并携带params参数，to的字符串写法 
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

//  跳转路由并携带params参数，to的对象写法
				
<router-link :to="{
	name:'xiangqing',
	params:{
		id:m.id,
		title:m.title
	}
 }">
	{{m.title}}
</router-link>			

特别注意:路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

//这样是path配置项写法
path:home/test/demo

3.接收参数

	<ul>
		<li>接收参数写法：{{$route.params.id}}</li>
		<li>接收参数写法：{{$route.params.title}}</li>
	</ul>