zoukankan      html  css  js  c++  java
  • 向路由组件传递参数2种方法

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

     

  • 相关阅读:
    C# 工厂
    sql server 数据库 数据DateTime 转mysql
    java 快捷工具,如何清理不需要的引用
    动态调用webservice 接口
    动态调用wcf接口服务
    下载图片出现问题
    jQuery Validation Engine 表单验证
    mvc5 知识点01
    mvc5 @RenderSection("scripts", required: false) 什么意思
    mvc5 _ViewStart.cshtml 模板页如何定义
  • 原文地址:https://www.cnblogs.com/quitpoison/p/9993722.html
Copyright © 2011-2022 走看看