[JavaScript知识库]vue中路由的props配置

在组件中使用$route会使组件与路由形成高度耦合
例如：

<template>
  <ul>
    <li>消息编号：{{$route.params.id}}</li>
    <li>消息编号：{{$route.params.title}}</li>
    <li>消息编号：{{$route.params.id}}</li>
    <li>消息编号：{{$route.params.title}}</li>
    ...
  </ul>
</template>

使用props将组件和路由解耦，并且可以让组件更方便地收到参数

第一种写法：
props值为对象
该对象中所有的key-value对都会通过props传给Home组件
但不常用，因为传递的是死数据

{
  path: 'home/:id',
  component: Home,
  props: {
    id: 123, 
    title: '你好'
  }
}

第二种写法：
props值为布尔值
布尔值为true，则把路由收到的所有params参数通过props传给Home组件
不会理会query参数

{
  path: 'home/:id',
  component: Home,
  props: true
 }

第三种写法：
props值为函数
该函数返回的对象中的每一组key-value都会通过props传给Home组件

{
  path: 'home/:id',
  component: Home,
  props(route) {
    return {
      id: route.query.id,
      title: route.query.title
    }
  }
  // 写成箭头函数的形式也可以
   props: route => ({
    id: route.query.id,
    title: route.query.title
  })
}

在Home.vue组件中接收
props:['id','title']