### 7.路由的props配置
作用：让路由组件更方便的收到参数
```js
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
```
1.router/index.js
//该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router" import About from '../pages/About' import Home from '../pages/Home' import News from '../pages/News' import Message from '../pages/Message' import Detail from '../pages/Detail' // 创建并且暴露一个路由器 export default new VueRouter({ routes:[ { name:'guanyu', path:'/about', component:About }, { path:'/home', component:Home, children:[ { path:'news', component:News,},
{ path:'message', component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', component:Detail, // props 的第一种写法 值为对象 该对象中所有的key -value 都会以props 的形势传递给detail 组件 // props:{a:1,b:'hello'}, // props 的第二种写法 值为布尔值 若布尔值为真 就会把该路由组件收到的所有params 参数 以props 的形势传递给detail 组件 //props:true,
// prpos 的第三种写法 值为函数 // props($route){ // return {id:$route.params.id,title:$route.params.title} // } // 结构赋值的写法 // props({params}){ // return {id:params.id,title:params.title} // } // 结构赋值的连续写法 props({params:{id,title}}){ return {id:id,title:title} }
}
]
}, ] },
] }) 2.Detail.vue <template> <ul> <li>消息id:{{ id }}</li> <li>消息标题:{{ title }}</li>
</ul> </template>
<script> export default { name:'Detail', props:['id','title'], mounted(){ console.log('detail组件挂载完毕',this.$route); } } </script>
<style>
</style> 3. Message.vue <template> <div> <ul v-for="m in messageList" :key="m.id"> <li> <!--跳转 路由 并且携带query 参数 to 的字符串写法--> <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> --> <!--跳转 路由 并且携带params 参数 to 的字符串写法--> <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }} </router-link> -->
<!--跳转 路由 并且携带query 参数 to 的对象写法--> <!-- <router-link :to="{ name:'xiangqing', // path:'/home/message/detail', query:{ id:m.id, title:m.title } }"> {{ m.title }} </router-link> -->
<!--跳转 路由 并且携带query 参数 to 的对象写法--> <router-link :to="{ name:'xiangqing', // path:'/home/message/detail', params:{ id:m.id, title:m.title } }"> {{ m.title }} </router-link> </li> </ul>
<hr>
<router-view></router-view> </div> </template>
<script> export default { name:'Message', data(){ return{ messageList:[ {id:'001',title:'消息001'}, {id:'002',title:'消息002'}, {id:'003',title:'消息003'}, ] } } } </script>
<style>
</style> 标签：vue,title,--,route,day84,Detail,params,props,id From： https://www.cnblogs.com/satisfysmy/p/17707149.html