vue-router--路由传参--props传参

最新推荐文章于 2024-07-25 18:15:00 发布

春风霓裳

最新推荐文章于 2024-07-25 18:15:00 发布

阅读量3.5k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43470725/article/details/125360040

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue Router中props属性的三种不同用法，包括值为对象、布尔值和函数的情况，以及如何通过params和query来传递数据给子组件。通过实例代码展示了如何在路由配置中设置props，并在组件中接收和使用这些传递的参数。

摘要由CSDN通过智能技术生成

注意和组件通信的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> &nbsp;&nbsp; -->
            <!-- 跳转路由并携带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> &nbsp;&nbsp; -->
            <!-- 跳转路由并携带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>