路由的props参数

文章目录props值是一个对象props值是一个布尔值props值是一个函数通过props接收params参数通过props接收query参数使用props参数，可以更方便的给路由组件传递数据。本篇基于路由的query参数中的完整实例，实现需求：从路由组件Message.vue向路由组件Detail.vue传递数据。路由规则配置中，props参数的使用有如下三种方式：props值是一个对象。pro

richest_qi

4012人浏览 · 2022-03-10 15:15:21

richest_qi · 2022-03-10 15:15:21 发布

文章目录

使用props参数，可以更方便的给路由组件传递数据。
本篇基于路由的query参数中的完整实例，实现需求：从路由组件Message.vue向路由组件Detail.vue传递数据。

路由规则配置中，props参数的使用有如下三种方式：

props值是一个对象。
props值是一个布尔值。
props值是一个函数。

接下来我们一一来看下这3种方式。

props值是一个对象

在Detail的路由规则中配置props值为一个对象，该对象中的key-value会全部以props的形式传递给Detail组件。

修改router/index.js

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            path:"detail",
                            component:Detail,
                            props:{
                                id:"xxx",
                                title:"yyy"
                            }
                        }
                    ]
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

在这里插入图片描述

修改路由组件Message.vue

<template>
   <div>
       <ul>
           <li v-for="message in messageList" :key="message.id">
               <router-link to="/home/message/detail">
                {{message.title}}
               </router-link>
           </li>
       </ul>
       <hr>
       <router-view></router-view>
   </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息01"},
                {id:"002",title:"消息02"},
                {id:"003",title:"消息03"},
            ]
        }
    }
}
</script>

<style>

</style>

修改路由组件Detail.vue
Detail组件通过props接收参数：id和title。

<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
export default {
    name:"Detail",
    props:['id','title']
}
</script>

<style>

</style>

在这里插入图片描述

props值是一个布尔值

Detail路由规则中配置props值为布尔值true，则Detail组件接收到的所有params参数会以props形式传递给过来。

修改router/index.js

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"xiangqing",
                            path:"detail/:id/:title",
                            component:Detail,
                            props:true
                        }
                    ]
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

在这里插入图片描述

路由组件Message.vue

<template>
   <div>
       <ul>
           <li v-for="message in messageList" :key="message.id">
               <router-link :to="{
                    name:'xiangqing',
                    params:{
                        id:message.id,
                        title:message.title
                    }
                   }">
                {{message.title}}
               </router-link>
           </li>
       </ul>
       <hr>
       <router-view></router-view>
   </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息01"},
                {id:"002",title:"消息02"},
                {id:"003",title:"消息03"},
            ]
        }
    }
}
</script>

<style>

</style>

在这里插入图片描述

路由组件Detail.vue

<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
export default {
    name:"Detail",
    props:['id','title']
}
</script>

<style>

</style>

在这里插入图片描述

props值是一个函数

路由规则配置中props值为一个函数，且函数的参数是$route。

通过props接收params参数

修改router/index.js

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"xiangqing",
                            path:"detail/:id/:title",
                            component:Detail,
                            props($route){
                                return {
                                    id:$route.params.id,
                                    title:$route.params.title
                                }
                            }
                        }
                    ]
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

在这里插入图片描述

路由组件Message.vue

<template>
   <div>
       <ul>
           <li v-for="message in messageList" :key="message.id">
               <router-link :to="{
                    name:'xiangqing',
                    params:{
                        id:message.id,
                        title:message.title
                    }
                   }">
                {{message.title}}
               </router-link>
           </li>
       </ul>
       <hr>
       <router-view></router-view>
   </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息01"},
                {id:"002",title:"消息02"},
                {id:"003",title:"消息03"},
            ]
        }
    }
}
</script>

<style>

</style>

在这里插入图片描述

路由组件Detail.vue

<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
export default {
    name:"Detail",
    props:['id','title']
}
</script>

<style>

</style>

在这里插入图片描述

通过props接收query参数

修改router/index.js

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            path:"detail",
                            component:Detail,
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }
                        }
                    ]
                },
                {
                    path:"news",
                    component:News
                }
            ]
        }
    ]
})

在这里插入图片描述

路由组件Message.vue

<template>
   <div>
       <ul>
           <li v-for="message in messageList" :key="message.id">
               <router-link :to="{
                    path:'/home/message/detail',
                    query:{
                        id:message.id,
                        title:message.title
                    }
                   }">
                {{message.title}}
               </router-link>
           </li>
       </ul>
       <hr>
       <router-view></router-view>
   </div>
</template>

<script>
export default {
    name:"Message",
    data(){
        return {
            messageList:[
                {id:"001",title:"消息01"},
                {id:"002",title:"消息02"},
                {id:"003",title:"消息03"},
            ]
        }
    }
}
</script>

<style>

</style>

在这里插入图片描述

路由组件Detail.vue

<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
export default {
    name:"Detail",
    props:['id','title']
}
</script>

<style>

</style>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

richest_qi

@qzw752890913

已为社区贡献19条内容