Vue 路由传递参数实例讲解

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

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

this.$route.params.id

<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-  to="/about" class="list-group-list">About</router- >
         <router-  to="/home" class="list-group-list">Home</router- >
        
     </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>

< >

</ >

<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: {
    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- -active{
      color: red;
   }

</style>

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

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

</template>

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

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