注意和组件通信的props传参区别:https://blog.csdn.net/qq_43470725/article/details/125118869
路由配置时具有三种写法:
children:[
{
name:'xiangqing',
// path:'detail/:id/:title',
path:'detail',
component:Detail,
// props的第一种写法,值为对象,
// 该对象中的所有key-value都会以props的形式传给Detail组件
// props:{a:1,b:'hello'}
// props的第二种写法,值为布尔值,若该布尔值为真
// 就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
// props:true
// props的第三种写法,值为函数
props($route){
return {id:$route.query.id,title:$route.query.title}
}
}
]
路由配置:
1、第一种写法,值为对象:该写法只能写死
props:{a:1,b:'hello'}
2、props的第二种写法,值为布尔值,若该布尔值为真就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
props:true
3、props的第三种写法,值为函数
props($route){
return {id:$route.query.id,title:$route.query.title}
}
传值:
1、param对象形式
<router-link :to="{
//path:'/about/message/detail',
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
2、query对象形式
<router-link :to="{
//path:'/about/message/detail',
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
接收数据:
<template>
<div class="Detail">
<ul>
<!-- <li>{{$route.query.id}}</li>
<li>{{$route.query.title}}</li> -->
<!-- <li>{{$route.params.id}}</li>
<li>{{$route.params.title}}</li> -->
<li>{{id}}</li>
<li>{{title}}</li>
</ul>
</div>
</template>
<script>
export default {
name:'Detail',
props:['id','title'],
mounted(){
console.log(this.$route)
},
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
.Detail{
background-color: coral;
}
</style>
代码演示
路由配置:
// 该文件用于专门创建路由器
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,
children:[
{
// 二级路由路径不能加/
path:'message',
component:Message,
children:[
{
name:'xiangqing',
// path:'detail/:id/:title',
path:'detail',
component:Detail,
// props的第一种写法,值为对象,
// 该对象中的所有key-value都会以props的形式传给Detail组件
// props:{a:1,b:'hello'}
// props的第二种写法,值为布尔值,若该布尔值为真
// 就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
// props:true
// props的第三种写法,值为函数
props($route){
return {id:$route.query.id,title:$route.query.title}
}
}
]
}
]
},
{
path:'/home',
component:Home,
children:[
{
// 二级路由路径不能加/
path:'news',
component:News
}
]
}
]
})
传数据路由组件
<template>
<div class="Message">
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<!-- <router-link :to="`/about/message/detail?id=${m.id}&title=${m.title}!`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link :to="{
//path:'/about/message/detail',
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<!-- <router-link :to="`/about/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带param参数,to的对象写法 -->
<!-- <router-link :to="{
//path:'/about/message/detail',
name:'xiangqing',
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'}
]
}
},
methods:{
}
}
</script>
<style scoped>
.Message{
background-color: bisque;
}
</style>
接收数据组件
<template>
<div class="Detail">
<ul>
<!-- <li>{{$route.query.id}}</li>
<li>{{$route.query.title}}</li> -->
<!-- <li>{{$route.params.id}}</li>
<li>{{$route.params.title}}</li> -->
<li>{{id}}</li>
<li>{{title}}</li>
</ul>
</div>
</template>
<script>
export default {
name:'Detail',
props:['id','title'],
mounted(){
console.log(this.$route)
},
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
.Detail{
background-color: coral;
}
</style>
结果