路由传参 - props

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

什么是代码的耦合?

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

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

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

路由代码传参

import About from '@/About'
{path :'/about/:id',//动态路由component:About,props:true
}{path:'/about',//普通路由component:About,props:{id:19}
}

模板代码传参

 props:['id']或者props:{id:{type:Number,//数据约束类型default:12//默认参数}}

布尔模式

如果props被设置为 true , router.params将会被设置为组件属性.
路由中

{path:"/about/:id"//动态路由component:About,props:true
}

组件中接收:

props:['id']

对象模式

如果props是一个对象,他会被设置为组件属性.
路由中:

path:'/about/:id',//动态路由
component:About,
props:{id:18
}

组件中接收

props:{id:{type:Number,//约束类型default:12//默认参数}
}

函数模式

你可以创建一个函数返回props.这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等.

routes:[{path:'/search',component:SearchUser,props:route => ({name:route,query.q})//返回对象 可以用()包住,//或者props:a=>{return{name:a.query.name}}}
]props:()=>({name:'张三'})

router路由传参 - props相关推荐

react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
id vue2路由传参_Vue2.0中 $route 和 $router 的区别
在做Vue项目时,在路由设置和跳转时有没有遇到过 $route 和 $router?乍一看,两个看起来几乎一模一样,有点傻傻分不清楚,他们到底有什么区别?在什么情况下用呢? 我们把这2个在控制台打印出 ...
vue2.0父向子传参，子向父传参，路由传参
父向子传值: //父组件 <selectionGroup v-for="item in tab" :item="item"></selecti ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
路由传参的几种方式（含params、query）
前言:路由传参在vue项目中是很常用的让我们用最简单的方法理解下3种路由的传参方式先看一下用到到文件有哪些第一种布尔值传参 1.需要在router文件夹中的index文件配置路由 {//布 ...

router路由传参 - props

使用props路由传参