router路由传参 - props

最新推荐文章于 2024-01-03 12:14:59 发布
VIP文章 最新推荐文章于 2024-01-03 12:14:59 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan_xiaoxin/article/details/117353037
版权

使用props路由传参

路由传参 - props

使用props可以降低耦合度,取代$route

什么是代码的耦合?

模块之间的联系紧密成度
联系越紧密就是耦合度越高，这样是不好的。因为模块和模块要低耦合才对。。

高内聚、低耦合的模块是设计时追求的目标。

衡量模块独立性的定性标准是内聚（一个模块内各个元素彼此结合的紧密程度）和耦合（一个软件结构内不同模块之间互连程度的度量）。

路由代码传参

import About from '@/About'
{
   
	path :'/about/:id',//动态路由
	component:About,
	props:
最低0.47元/天 解锁文章
源小新
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router 路由传参用法实例分析
10-15
主要介绍了vue-router 路由传参用法,结合实例形式分析了vue-router 路由传参基本使用方法及操作注意事项,需要的朋友可以参考下
vue-router中页面直接拿参数的 props传值的三种方式
A_9888的博客
02-14 988
一、原始方法 { path: ‘/about/:id/:name’, component: About } 页面拿参数 : this.$route.params.id 二、props(布尔值方法) tips：此方法只能通过params方式上行得通 { path: ‘/about/:id/:name’, component: About， props:true } 页面拿参数 在页面 props:['id','name] 二、props(函数方法) { path: '/about/:id
Vue知识点：路由的props配置
summer_cloudy的博客
03-15 161
【代码】Vue知识点：路由的props配置。
六、【Vue-Router】路由的props配置
天行健，君子以自强不息
08-07 2881
路由的props配置
vue-router--路由传参--props传参
qq_43470725的博客
06-19 3263
vue-router
Vue-router路由的props配置
李公子的博客
08-14 7397
作用：让路由组件更方便的收到参数 第一种写法：props值为对象 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 children: [ { name: 'xiangqing', path:'detail', component: Detail, // props对象中所有的key-value的组合最终都会通过props传给Detail组件
vue2进阶篇：vue-router之路由的props配置
刘大猫
07-09 2099
vue2进阶篇：vue-router之路由的props配置
Vue3-34-路由-路由配置参数 props
最新发布
northcastle的博客
01-03 1696
vue3 中 路由的参数配置 -props 的使用
浅谈vue-router 路由传参的方法
08-28
主要介绍了浅谈vue-router 路由传参的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-router-with-props:自定义路由以响应路由器dom
05-10
import { PropsRoute, PublicRoute, PrivateRoute } from 'react-router-with-props'; 路线类型 PropsRoute-您可以传递道具的默认路线。 PublicRoute-它阻止对身份验证用户的访问，您可以将道具传递给它。 ...
VUE框架CLI组件化配置Router配置使用props传递params数据------VUE框架
吾不识青天高黄地厚。唯见月寒日暖，来煎人寿。
12-19 1190
VUE框架CLI组件化配置Router配置使用props传递params数据------VUE框架
vue-router中props传值的三种方式
m0_37705917的博客
09-27 3516
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。以下介绍使用 props 将组件和路由解耦的三种方式： 1、设置props为true，通过params的方法进行传递 { path:"groupDetail/:groupId",//定义其属性 component:groupDetail, props:true } 2、设置props为函数，通过query的方式进行参数的传递 { path:"grou
Vue - vue-router - 参数传递
qq_33962481的博客
08-18 348
文章目录一、query的类型1.1 对象里面的属性1.2 获取query里面的数据 一、query的类型 query对应的是一个对象. 对象中使用query的key作为传递方式. <template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <
Vue中路由props传参
weixin_42202992的博客
03-06 1277
vue-router使用props传递参数的三种方法
路由的props参数
richest_qi的博客
03-10 3895
文章目录props值是一个对象props值是一个布尔值props值是一个函数通过props接收params参数通过props接收query参数 使用props参数，可以更方便的给路由组件传递数据。 本篇基于路由的query参数中的完整实例，实现需求：从路由组件Message.vue向路由组件Detail.vue传递数据。 路由规则配置中，props参数的使用有如下三种方式： props值是一个对象。 props值是一个布尔值。 props值是一个函数。 接下来我们一一来看下这3种方式。 props值是一
vue常用路由router之“路由的props配置”
空投在我怀里的博客
03-11 2429
作用：让路由组件更方便的收到参数 { name:'xiangqing', path:'detail/:id', component:Detail, //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 // props:{a:900} //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件 // props:true //第三种写法：props值为
【Vue】路由组件通过props配置传参（图文+代码）
【敦厚的曹操】的专栏
06-06 1600
【Vue】路由组件通过props配置传参（图文+代码）
React Router路由细讲（二路由道具（Route props））
xiaoqingrong的博客
09-20 3661
在Route中我们可以有三种方法去render。使用render函数我们可以用js语言来构建DOM. <Route component> <Route render> <Route children> 这三个方法都使用下面三个相同的路由道具（Route props） match location history 接下来我们一个方法一个的讲。 1、compon...
Vue Router通过props传参
热门推荐
落裸裸的专栏
10-20 1万+
Vue Router通过props传参 在Vue项目中，通过路由转跳至其他页面时，可能会携带一些相对复杂的参数，显然使用动态路径参数（ /user/:username）或URL查询参数（/user?username=abc）都是不太方便的，因为这两种方式都只能传字符串。此时便可以启用路由props传参，也可达到解耦的目的。 启用props后，可以通过以下两种方式进行传参。 方式一 如果只是传递...
vue3路由传参props
08-18
- *1* *2* [vue-router--路由传参--props传参](https://blog.csdn.net/qq_43470725/article/details/125360040)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值