路由query和params传参

路由配置

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})

query传参

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- query传参的字符串写法 -->
				<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
				<!-- query传参的对象写法 -->
				<router-link :to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
				{{m.title}}
				</router-link>
			</li>
		</ul>
		<br>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data(){
			return {
				messageList:[
					{id:'001',title:'白猪'},
					{id:'002',title:'大漂亮'},
					{id:'003',title:'狗子'},
				]
			}
		}
	}
</script>

子组件中接收参数

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

params传参

params传参需要配合命名路由使用
路由配置变化如下

children:[
   {
       name:'xiangqing',
       path:'detail/:id/:title',
       component:Detail,
       
   }
]

params传参

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- params传参的字符串写法 -->
				<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
				
				<!-- params传参的对象写法 -->
				<router-link :to="{
					name:'xiangqing',
					params:{
						id:m.id,
						title:m.title
					}
				}">
				{{m.title}}
				</router-link>
			</li>
		</ul>
		<br>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data(){
			return {
				messageList:[
					{id:'001',title:'白猪'},
					{id:'002',title:'大漂亮'},
					{id:'003',title:'狗子'},
				]
			}
		}
	}
</script>

参数接收

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

props参数

接收参数的一种新方法

接收params传参

params传参+下方路由配置项

{
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail,
                            props($route){
                                return {
                                    id:$route.params.id,
                                    title:$route.params.title
                                }
                            }
                        }
                    ]
                }

接收query传参

query传参+下方路由配置项

{
	path:'message',
	  component:Message,
	  children:[
	      {
	          name:'xiangqing',
	          path:'detail',
	          component:Detail,
	          props($route){
	              return {
	                  id:$route.query.id,
	                  title:$route.query.title
	              }
	          }
	      }
	  ]
	}

相同的接收参数形式

<template>
	<ul>
		<li>消息编号：{{id}}</li>
		<li>消息标题：{{title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
        props:['id','title']
	}
</script>