vue路由router之“路由的props配置”

作用：让路由组件更方便的收到参数

案列展示：

1.路由

// 该文件专门用于创建整个应用的路由器

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',

                            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,

                                    a:1,

                                    b:'hello'

                                }

                            }

                        }

                    ]

                }

            ]

        }

    ]

})

2.跳转页面

<template>

    <div>

        <ul>

            <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>&nbsp;&nbsp; -->

                <!-- 跳转路由并携带params参数，to的对象写法 -->

                <router-link :to="{

                    name:'xiangqing',

                    query:{

                        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>

3.跳转到的页面

<template>

    <ul>

        <li>消息编号：{{id}}</li>

        <li>消息标题：{{title}}</li>

    </ul>

</template>

<script>

    export default {

        name:'Detail',

        props:['id','title'],

        computed: {

            // id(){

            //     return this.$route.query.id

            // },

            // title(){

            //     return this.$route.query.title

            // },

        },

        mounted() {

            // console.log(this.$route)

        },

    }

————————————————

版权声明：本文为CSDN博主「空投在我怀里」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/wrk2466836002/article/details/123407323