路由的props参数

已于 2022-03-10 15:15:48 修改
阅读量3.9k 收藏 22
点赞数 5
分类专栏： Vue2 文章标签： props params query 路由组件 数据传递
于 2022-03-10 15:15:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/123400033
版权

文章目录

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

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

  1. props值是一个对象。
  2. props值是一个布尔值。
  3. 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>

在这里插入图片描述
在这里插入图片描述

richest_qi
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
组件通信的方式
m0_69974492的博客
04-24 1211
组件通信一. 父传子二. 子传父三. 兄弟组件之间传值 一. 父传子 在父组件中给子组件标签上绑定一个属性(属性=属性值)， 属性上挂载需要传递的值 在子组件通过props:[“自定义属性名”]来接收数据 props 接收数据的方式有两种：数组形式和对象形式 二. 子传父 (1)在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法 (2)在子组件的方法通过**this.$emit(‘自定义事件名’,“要传递给父组件的数据”)**来调用 三. 兄弟组件之间传值 (1). 创建.
props接受参数配置
m0_65182393的博客
04-08 760
Vue学习：配置项props的配置，让组件接收外部传递的数据
weixin_47295886的博客
02-22 711
配置项props 功能：让组件接收外部传递的数据 1、传递数据 2、接收数据 a、只接收 props:["参数名称"] b、限制类型 props:{ 参数名称:String } c、限制类型、限制必要性、指定默认值 props:{ 参数名称:{ type:String,//类型 required:true//参数是必要的 defa
vue props接收组件数据(类型配置)
最新发布
码海扬帆：前端探索之旅的博客
05-15 395
"props"接收的常见传参类型有以下几种：String：字符串类型。required： 是否必传, true必传，false 非必传。Function：函数类型。,Boolean：布尔类型。Function：函数类型。Boolean：布尔类型。default： 默认值。String：字符串类型。Number：数字类型。Object：对象类型。type： 传参的类型。Number：数字类型。Object：对象类型。Array：数组类型。Array：数组类型。
Vue路由的props三种写法
YJH15888673903的博客
05-11 1136
vue路由里，props的写法
props接收参数定义
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
10-13 646
props: { dzpImgList: { //字符串 type: String, default: '' }, dzpImgList: { //数值 type: Number, default: 0 }, dzpImgList: { //布尔值 type: Boolean, default: true }, dzpImgList: { //数组 t...
分配5：路由参数
02-19
在JavaScript编程中，路由参数是Web应用程序中一个关键的概念，特别是在构建单页应用程序（SPA）或服务器端渲染（SSR）应用时。路由是管理应用程序不同页面或视图的机制，而路由参数则是用于传递动态数据到特定路由...
vue路由跳转传参数的方法
10-17
- 如果在路由配置中设置了`props: true`，则可以直接将参数传递给目标组件作为props。 - 当使用`params`时，目标路由必须有相应的动态段来接收这些参数，否则参数将无法被接收。 - 使用`query`时，参数会显示在URL中...
react路由配置方式详解
12-09
本文介绍了react路由配置，最近刚开始学，分享给大家，顺便给自己留个笔记。 包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构，主要的代码都在src目录... <p>Detail，url参数：{this.props.params.id}</p>
详解React-Router中Url参数改变页面不刷新的解决办法
08-27
在 React-Router 中，使用 URL 传参功能可以实现动态路由的需求，但是默认情况下，当 URL 参数改变时，页面并不会刷新。这是因为 props 的改变并不会引起组件的重新渲染，而 URL 参数属于 props。那么，如何让组件在...
路由props配置
yms869的博客
09-25 271
路由props配置
学习记录-路由传参使用props接收数据
victorylip的博客
03-23 342
--- 前端小白记录学习和工作中遇到的问题，答案源自尚硅谷前端项目-尚品汇。
props的接收方式
babywenever的博客
12-02 257
只能进行属性的接收而已，但是无法实现类型判断，默认值设置、是否必需以及自定义校验规则。据类型的简单判断，但是无法实现默认值设置、是否必需以及自定义校验规则。对数据类型可以判断，确认是否必需，设置默认值，自定义校验规则。
Vue3：路由组件的props用法
Brave_heart4pzj的博客
03-22 367
Vue
vue-router--路由传参--props传参
qq_43470725的博客
06-19 3481
vue-router
vue2进阶篇：vue-router之路由的props配置
刘大猫
07-09 2223
vue2进阶篇：vue-router之路由的props配置
Vue-router路由的props配置
李公子的博客
08-14 7623
作用：让路由组件更方便的收到参数 第一种写法：props值为对象 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 children: [ { name: 'xiangqing', path:'detail', component: Detail, // props对象中所有的key-value的组合最终都会通过props传给Detail组件
Vue 通过props实现父子组件通信
程序员大阳
07-19 885
1. 前言 大多数企业官网，都有新闻列表功能，一般情况下我们会把新闻列表封装为一个组件。 如果每个针对新闻列表的每条新闻，都要开发很多可复用的复杂功能，那么也可以进一步的将新闻内容开发为一个单独的组件。 此时新闻列表组件为父组件，新闻内容组件为子组件，如果想从父组件向子组件传值(通讯)，可以借助props来实现。 2. 开发新闻列表父组件 在src/componets目录下新建NewsList.vue，代码如下。 <template> <div> <template
路由组件传参-props解耦方式（主要）
weixin_30410999的博客
06-10 1020
在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用props将组件和路由解耦： 取代与$route的耦合 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = ...
vue3 路由 props 参数
03-23
Vue3 路由 props 参数可以通过在路由配置中设置 props 属性来传递参数，例如： const routes = [ { path: '/user/:id', component: User, props: true } ] 在这个例子中，当访问 /user/123 时，User 组件会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值