向路由元件傳遞引數2種方法

前端愛好者發表於2019-01-19
路由元件

方式1：路由路徑攜帶引數（param/query）

配置路由

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

路由路徑
<router-link :to=”`/home/message/detail/`+message.id”>{{message.title}}</router-link></pre>
路由元件中讀取請求引數
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;
   }
</stle></pre>

相關文章