路由参数

query参数：

<li v-for='m in messageList' :key='m.id'>
          <!-- 通过query传递参数 -->
          <router-link :to="
          {
              name:'messageDetail',
              query:{id:m.id,title:m.title}
          }">{{m.title}}</router-link>
</li>

params参数:

1 配置路由声明接收param参数

{path:'/home',
            component:Home,
            children:[
                {path:'news',
                component:News},
                {path:'message',
                component:Message, 
                children:[
                    {path:'detail/:id/:title',name:'messageDetail',component:Detail}//使用占位符声明接收params参数
                ]}
            ]},

2 传递参数

 <li v-for='m in messageList' :key='m.id'>
         <!--跳转并携带params参数，to的字符写法--!>
         <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> 
         <!-- 对象写法只能写name不能写path -->
          <!-- <router-link :to="
          {name:'messageDetail',
          params:{id:m.id,title:m.title}
          
              }">{{m.title}}</router-link> -->
</li>

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

props配置

//props第一种写法，值为对象，该对象中的key-value都会以props的形式传给Detail组件
props:{a:1,b:'hello'},
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数以props的形式传给Detail组件
props:true,
//第三种写法，值为函数
props($route){
	return {id:$route.query.id,title:$route.query.title}
},
//解构赋值
props({query}){
    return {id:query.id,title:query.title}
}

Detail组件接收参数：

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