欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-11 14:21:08
方式1:路由路径携带参数(param/query) 1) 配置路由 2) 路由路径 3) 路由组件中读取请求参数 方式2:属性携带数据 ,这个是app.vue 使用方法: ......

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