Vue-router路由的props配置

作用：让路由组件更方便的收到参数

1. 第一种写法：props值为对象

   1. 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件

      children: [
          {
              name: 'xiangqing',
              path:'detail',
              component: Detail,
              // props对象中所有的key-value的组合最终都会通过props传给Detail组件
              props:{
                  id: '888',
                  title: '你好啊'
              }
          }
      ]

   2. 在Detail组件中使用props接收传递来的数据

      <template>
        <div>
          <ul>
              <li>接收的id为{{id}}</li>
              <li>接收的title为{{title}}</li>
          </ul>
        </div>
      </template>
      
      <script>
      export default {
          name: 'Detail',
          // 接收组件传递来的数据
          props: ['id', 'title']
      }
      </script>

   3. 这种写法传递的参数不灵活 一般很少使用

2. 第二种写法：props值为布尔值

   1. 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件

      {
          name: 'xiangqing',
          path:'detail/:id/:title', //使用占位符声明接收params参数
          component: Detail,
          // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
          props: true
      }

       

   2. 传递params参数

      <li v-for="item in list" :key="item.id">
        <router-link :to="{
          name: 'xiangqing',
          params: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}</router-link>
      </li>

   3. 组件内部使用props接收参数

      <template>
        <div>
          <ul>
              <li>接收的id为{{id}}</li>
              <li>接收的title为{{title}}</li>
          </ul>
        </div>
      </template>
      
      <script>
      export default {
          name: 'Detail',
          // 接收组件传递来的数据
          props: ['id', 'title']
      }
      </script>

   4. 这种写法相对比上一种传参更为简介灵活 但是只能作用于params类型的参数 无法对query类型的参数起作用

3. 第三种写法：props值为函数

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

      {
          name: 'xiangqing',
          path:'detail/:id/:title', //使用占位符声明接收params参数
          component: Detail,
          // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
          // props函数会自动调用并提供一个$route参数 可以通过$route来获取想要的数据传递给组件
          props($route) {
              return {
                  id: $route.params.id,
                  title: $route.params.title,
                  // 还可以返回一些别的数据
                  a: 1,
                  b: "hello"
              }
          }
      }

        

   2. 组件内部使用props接收参数

      <template>
        <div>
          <ul>
              <li>接收的id为{{id}}</li>
              <li>接收的title为{{title}}</li>
              {{a}}-----{{b}}
          </ul>
        </div>
      </template>
      
      <script>
      export default {
          name: 'Detail',
          // 接收组件传递的参数
          props: ['id', 'title', 'a', 'b']
      }
      </script>

   3. 这种方式传递数据更为灵活 通过函数的$route参数来获取需要的数据传递给组件另外还可以携带一些其他数据 通过$route可以获取params和query两种形式的参数 相对前两种方式来说功能更加的强大