[vue-router]之路由组件传参
前一段一直在用react,也做了很多相关的问题记录,是时候梳理一下vue系列的了,也让自己更清楚这些概念,话说每次去看官方文档都有新的收获。
官方的解释:
在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
我们之前在获取路由的params时(代码如下)会用到,this.$route.params.id,为了解耦这种方式,使用了props的形式来解耦。
{
path:'/router/:id',
name:'router',
component:Router
}
props分为三种形式:布尔,对象,方法
第一种:布尔
在路由配置里边设置props为true,然后去对应组件里边设置props,props的值为动态参数的名称,示例中就是:id中的id,设置为你自己设置的动态参数名即可,这里可能刚开始不太好理解。
router.js
{
path:'/r/:id',
name:'router',
component:Router,
props:true
}
router.vue
<template>
<div>
router
<h1>{{ id }}</h1>
</div>
</template>
<script>
export default {
name: 'router',
props:['id'],
mounted () {
console.log(this.id);
}
}
</script>
第二种:对象
在路由配置里边设置props为对象{name:”test”},然后去组件中设置props,props的值为路由配置里边的props的key,也就是name
router.js
{
path:'/r/:id',
name:'router',
component:Router,
props:{
name:"test"
}
}
router.vue
<template>
<div>
router
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
name: 'router',
props:['name'],
mounted () {
console.log(this.name);
}
}
</script>
第三种:函数
首先在路由配置里边设置props为函数,函数返回一个对象,然后去组件中设置要用的props,props的值为路由组件里边返回对象的key,也就是示例中的name和age
router.js
{
path:'/r/:id',
name:'router',
component:Router,
props:() => ({name:"test",age:18})
}
router.vue
<template>
<div>
router
<h1>{{ name }} {{ age }}</h1>
</div>
</template>
<script>
export default {
name: 'router',
props:['name','age'],
mounted () {
console.log(this.name,this.age);
}
}
</script>
欢迎关注小程序,感谢您的支持!
陈佳宇
2020年5月29日 下午12:27
很想看一下再APP.VUE是怎么传过来的,