在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。以下介绍使用 props 将组件和路由解耦的三种方式：

1、设置props为true，通过params的方法进行传递

 {
   path:"groupDetail/:groupId",//定义其属性
   component:groupDetail,
   props:true
 }

---

2、设置props为函数，通过query的方式进行参数的传递

{
  path:"groupDetail",
  component:groupDetail,
  props : (route) => ({
    groupId : route.query.groupId
  })
}

---

3、通过props为对象的方式进行处理静态数据,可使用对象模式

{
  path:"groupDetail",
  component:groupDetail,
  props:{ 
    groupId:'404'
  }
}

---

groupDetail组件的使用

<template>
  <div>{{groupId}}</div>
</template>
<script>
export default {
  props: ["groupId"]
}
</script>

 作者：胡元娇

链接：https://ecloud.10086.cn/api/query/developer/user/home.html?ticket=ST-72804-tBdwJS0I3UIN7CNEFqSD-cas01.example.org#L2FwaS9xdWVyeS9kZXZlbG9wZXIvZm9ydW0vZmxvb3JsaXN0Lmh0bWw/aWQ9NjllM2NlNmEyYWE4NDYzMzk3OTAzMzY0NmM5MDk4OTYmc291cmNlPXVzZXI=

来源：移动云开发者社区