[vue-router]之路由组件传参

作者: MJ 分类: vue 发布时间: 2019-06-18 18:10

前一段一直在用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>

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注