• 简化$route.query/params用props来实现

   <h2>消息详情：{{$route.query.title}}</h2>
   <h2>消息编号：{{$route.query.id}}</h2>
//变成下面这样，简化{$route.query.
  <h2>消息详情：{{title}}</h2>
   <h2>消息编号：{{id}}</h2>

使用计算属性方式实现：

缺点：有很多重复的this.$route

 computed:{
    title(){
      return this.$route.query.title
    },
    id(){
      return this.$route.query.id
  }
  },

1.使用props，实现子路由组件的传递

传递

 children:[
    {
     path:'tongzhi',
     component:TongZhi
    },
    {
     path:'message',
     component:Message,
     children:[//拼接message这个路由
      {
       name:'detail',
       path:'detail',
       component:Detail,
       //传递死数据,静态作用，对象写法
       props:{title:'good',id:666}
     }
     ]
    }

接收（组件接收）

  <!-- <h2>消息详情：{{$route.query.title}}</h2>
   <h2>消息编号：{{$route.query.id}}</h2> -->
    <h2>消息详情：{{title}}</h2>
   <h2>消息编号：{{id}}</h2>
...
  // computed:{
  //   title(){
  //     return this.$route.query.title
  //   },
  //   id(){
  //     return this.$route.query.id
  // }
  // },
  props:['title','id'],

这里和index.js的配置文件和detail子路由组件直接相互传值

2.布尔值传递，只要把要props属性修改为true，那么久不用写计算属性，直接使用属性就好
但是只能使用params参数,不能接收query参数
发送

   name:'detail',
       path:'detail/:x/:y',
       component:Detail,
       //传递死数据,静态作用，对象写法
      //  props:{title:'good',id:666}
       //属性修改为true
        props:true

接收

  <h2>消息详情：{{x}}</h2>
   <h2>消息编号：{{y}}</h2>
...
  props:['x','y'],

3.函数写法
发送

   // 对象写法，args这个参数是message里面的router-link将数据传递给的，
        // path:'detail/:title/:id'这里的id、title一一对应props里面的键名
        //还发送给detail
        props(args){
          return {
            id:args.params.id,
            title:args.params.title
          }

args是router-link将数据传递给的

 <router-link :to="{
      name:'detail',
       params:{
         id:m.id,
         title:m.title
       }
      }"
    >{{m.title}}</router-link>
    </li>

接收路由配置

  props:['id','title'],