Vue 路由props配置（Day52）

props配置

1. 作用：让组件接收参数更方便

2. 实现

   1. 在父（Message）组件中进行数据传递

      Message组件

                      <router-link :to="{
                          name:'DEtail',
                          query:{
                              id:item.id,
                              title:item.title
                          }
                      }">{{ item.title }}
                      </router-link>
      

   2. 在index.js文件中需要接收参数的组件中进行配置

      1. props值为对象，该对象中所有键值均通过props传递给Detail组件

         import VueRouter from "vue-router";
         import Home from "@/pages/Home.vue";
         import Message from "@/pages/Message.vue";
         import Detail from "@/pages/Detail.vue";
         export default new VueRouter({
             routes: [
                 {
                     path: '/home',
                     component: Home,
                     children: [
                         {
                             path: 'message',
                             component: Message,
                             children: [
                                 {
                                     name: 'DEtail',
                                     path: 'detail',
                                     component: Detail,
                                     props:{
                                         a:1,
                                         b:'hello'
                                     }
                                 }
                             ]
                         },
                     ]
                 },
             ]
         })
         

      2. props值为布尔值，值为true时，将路由接收到的所有params参数通过props传递给Detail组件

         import VueRouter from "vue-router";
         import Home from "@/pages/Home.vue";
         import Message from "@/pages/Message.vue";
         import Detail from "@/pages/Detail.vue";
         export default new VueRouter({
             routes: [
                 {
                     path: '/home',
                     component: Home,
                     children: [
                         {
                             path: 'message',
                             component: Message,
                             children: [
                                 {
                                     name: 'DEtail',
                                     path: 'detail',
                                     component: Detail,
                                     props:true
                                 }
                             ]
                         },
                     ]
                 },
             ]
         })
         

      3. props值为函数，函数返回值的对象中每一组键值均以props传递给Detail组件

         import VueRouter from "vue-router";
         import Home from "@/pages/Home.vue";
         import Message from "@/pages/Message.vue";
         import Detail from "@/pages/Detail.vue";
         export default new VueRouter({
             routes: [
                 {
                     path: '/home',
                     component: Home,
                     children: [
                         {
                             path: 'message',
                             component: Message,
                             children: [
                                 {
                                     name: 'DEtail',
                                     path: 'detail',
                                     component: Detail,         					   	   
                                     //基础写法
                                     props($route){
                                         return {      									  
                                             id:$route.query.id,
                                             title:$route.query.title
                                         }
                                     }
                                     //解构赋值写法
                                     /*props({query}){
                                         return {
                                             id:query.id,
                                             title:query.title
                                         }
                                     }*/
                                     // 连续解构赋值写法
                                     /*props({query:{id,title}}){
                                         return {
                                             id,
                                             title
                                         }
                                     }*/
                                 }
                             ]
                         },
                     ]
                 },
             ]
         })
         

   3. 在目标组件中进行渲染

      Detail组件

      <script>
      import {defineComponent} from 'vue'
      
      export default defineComponent({
          name: "Detail",
          props:['id','title'],
      })
      </script>
      
      <template>
          <ul>
              <li>{{id}}</li>
              <li>{{title}}</li>
          </ul>
      </template>