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

2018-11-22 08:42:26来源：博客园阅读 ()

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

1) 配置路由

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

2) 路由路径

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

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

this.$route.params.id

方式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>

<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>

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

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