[JavaScript知识库]124_路由的props配置

作用：让路由组件更方便的收到参数。
使用第三种写法时，父路由组件只管传参数，无论query还是params，路由器都能将返回值中所有的key-value以props的形式传给子路由组件，然后子路由组件用props接。

Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带params参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
					name:'xiangqing',
					query:{
						id:m.id,
						title:m.title
					}
				}">
          {{m.title}}
        </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    data() {
      return {
        messageList: [{
            id: '001',
            title: '消息001'
          },
          {
            id: '002',
            title: '消息002'
          },
          {
            id: '003',
            title: '消息003'
          }
        ]
      }
    }
  }
</script>

router文件夹下的index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
  routes: [{
      name: 'guanyu',
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [{
          path: 'news',
          component: News,
        },
        {
          path: 'message',
          component: Message,
          children: [{
            name: 'xiangqing',
            path: 'detail',
            component: Detail,

            // props的第一种写法（基本不用），值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
            /* props: {
              a: 1,
              b: 'hello'
            }, */

            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
            // props: true,

            // props的第三种写法，值为函数，返回值中的所有key-value都会以props的形式传给Detail组件。
            props($route) {
              return {
                id: $route.query.id,
                title: $route.query.title,
                a: 1,
                b: 'hello'
              }
            }
          }]
        }
      ]
    }
  ]
})

Detail.vue

<template>
  <ul>
    <li>消息编号：{{id}}</li>
    <li>消息标题：{{title}}</li>
  </ul>
</template>

<script>
  export default {
    name: 'Detail',
    props: ['id', 'title']
  }
</script>