vue--day84---路由的props配置
### 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>
