Vue Router系列之（五）路由传参

路由传参

如何给路由组件传递参数

点击导航区的时候将数据带给路由组件，展示区根据数据渲染组件，渲染的都是同一个组件，只不过数据不同

路由组件可以接收两种参数：query参数和params参数

这两种参数的写法与Ajax中query参数和params参数的写法是一样的

1. query参数

1. 传递参数

   <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
   				
   <!-- 跳转并携带query参数，to的对象写法 -->
   <!-- 标准格式-->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:m.id,
               title:m.title
   		}
   	}"
   >跳转</router-link>
   

2. 路由组件的模板中接收参数：

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

注：这种传递、接收参数的方式不会体现在vue-router的配置文件中

2. params参数

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

   {
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
                     	  // :id和:title是占位符
                     	  // 使用占位符声明接收params参数
                     	  // nodejs中有这种写法
   					path:'detail/:id/:title', 
   					component:Detail
   				}
   			]
   		}
   	]
   }
   

2. 传递参数

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

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

3. 路由组件的模板中接收参数：

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