方式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;
}
</style></pre>
