props 对象写法

1. 这个对象中的所有 key-value 都会通过 props 传给指定的组件。

2. 传参（给 Home 组件传递数据）

   export default new VueRouter({
       routes: [
           {
               path: '/home',
               component: Home,
               props: {
                   id: '1001',
                   name: '张三'
               }
           },
           {
               path: '/about',
               component: About
           }
       ]
   })

3. 接参（Home.vue）

   <template>
       <div>
           <h2>我是 Home 组件</h2><br><br>
           <h4>id: {{id}}</h4>
           <h4>name: {{name}}</h4>
       </div>
   </template>
   
   <script>
       export default {
           name: 'Home',
           props: ['id','name'],
       };
   </script>

props 布尔值写法

1. 布尔值为 True 表示可以把路由收到的所有 params 参数通过 props 传给指定组件。

2. 路由配置

   export default new VueRouter({
       routes: [
           {
               name: 'home',
               path: '/home/:title/:time',
               component: Home,
               props: true
           },
           {
               path: '/about',
               component: About
           }
       ]
   })

3. 传参（App.vue）

   <router-link active-class="active" :to="{
       name: 'home',
       params: {
           title: 'Hello',
           time: '2022-01-23'
       }
   }">Home</router-link>

4. 接参（Home.vue）

   <template>
       <div>
           <h2>我是 Home 组件</h2><br><br>
           <h4>标题: {{title}}</h4>
           <h4>时间: {{time}}</h4>
       </div>
   </template>
   
   <script>
       export default {
           name: 'Home',
           props: ['title','time'],
       };
   </script>

props 函数写法

1. 这种写法比较常用，函数返回值一个对象，对象中的所有 key-value 都会通过 props 传给指定的组件。

2. props 函数是 Vue 帮我们调用的，而且在调用时会给我们传一个 route 参数，通过这个参数能拿到其他组件传来的数据。

3. 函数内也可以进行一些逻辑处理，例如发起网络请求等。

4. 配置文件

   export default new VueRouter({
       routes: [
           {
               path: '/home',
               component: Home,
               props(route){
                   return {
                       title: route.query.title,
                       time: route.query.time,
                   }
               }
           },
           {
               path: '/about',
               component: About
           }
       ]
   })

5. 传参（App.vue）

   <router-link active-class="active" :to="{
       path: '/home',
       query: {
           title: 'Hello',
           time: '2022-01-23'
       }
   }">Home</router-link>

6. 接参（Home.vue）

   <template>
       <div>
           <h2>我是 Home 组件</h2><br><br>
           <h4>标题: {{title}}</h4>
           <h4>时间: {{time}}</h4>
       </div>
   </template>
   
   <script>
       export default {
           name: 'Home',
           props: ['title','time'],
       };
   </script>

7. props 配置文件中 ES6 增强型写法

   export default new VueRouter({
       routes: [
           {
               path: '/home',
               component: Home,
               props({
                   query: {title,time},
                   // params: {}
               }){
                   return {title,time}
               }
           },
           {
               path: '/about',
               component: About
           }
       ]
   })