向路由组件传递参数2种方法

方式1：路由路径携带参数（param/query）

1. 配置路由

children:[
             {
              path:'/home/message/detail/:id',
              component:MessageDetail
             }
 ]</pre>

2. 路由路径

<router-link :to="'/home/message/detail/'+message.id">{{message.title}}</router-link></pre>

3. 路由组件中读取请求参数

this.$route.params.id</pre>

方式2：<router-view>属性携带数据 ，这个是app.vue

<template>
  <div>
    <div class="row">
     <h2>router-aa</h2>
   </div>

   <div class="row">
    <div class="col-md-2 col-md-offset-9">
      <div class="list-group">
         <router-link to="/about" class="list-group-list">About</router-link>
         <router-link to="/home" class="list-group-list">Home</router-link>

     </div>
   </div>
 </div>

   <div class="row">
    <div class="col-md-6 md-offset-6">
     <div class="panel">
       <div class="panel-body">
           <keep-alive>
               <router-view msg="abc"></router-view>
           </keep-alive>

       </div>
     </div>
     </div>
   </div>
</div>
</template>

<script>

</script>

<style> h2{ width: 100%; text-align: center; margin-top: 20px;
  } .list-group-list{ border:1px solid #ddd; color: #000; padding: 10px; margin-left: 30px;
  } .list-group-list:link{ text-decoration: none;
  } .list-group-list:hover{ color: #000;
  } .list-group-list:nth-child(1){ border-bottom: none!important;
   } .panel{ border-bottom: 1px solid #ddd;
   } .router-link-active{ color: red;
   }

</style></pre>

<router-view :msg="msg"></router-view></pre>

使用方法：

<template>
  <div>
      <h2>我是about组件</h2>
      <input type="text" style="width:200px;border:1px solid #ddd;margin-left:30px;">

     <P>{{msg}}</P>
     <hr/>
  </div>

</template>

<script> export default{
        props:{
           msg:String
        }
    } </script>

<style> h2{ color: red;
   }
</style></pre>