zoukankan      html  css  js  c++  java
  • Vue动态路由 Get传值

    <template>
        <!-- 所有的内容要被根节点包含起来 -->
        <div id="home">    
           我是首页组件
    
            <ul>
                <li v-for="(item,key) in list">
                    <router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
                </li>
            </ul>
        </div>
    </template>
    
    
    <script>
        export default{
            data(){
                return {               
                   msg:'我是一个home组件',
                   list:['商品111111','商品222222','商品333333']    
                }
            }
        }
    
    </script>
    
    <style lang="scss" scoped>
        
    </style>
    <template>
       
        <div id="content">    
          pcontent 商品详情
        </div>
    </template>
    
    
    <script>
        
    
    
        export default{
    
            data(){
    
                return{
    
                    msg:'数据'
                }
            },
            mounted(){
    
                  //获取get传值
    
    
                  console.log(this.$route.query);
            }
    
        }
    </script>

    
    
    
    
    <template>    
        <div id="news">    
           我是新闻组件   
    
    
         <ul>
            <li v-for="(item,key) in list">
                 <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
            </li>
         </ul>
              
        </div>
    
    </template>
    
    
    <script>
    
        export default{
            data(){
                return {               
                   msg:'我是一个新闻组件'  ,    
                   list:['111111','222222','333333']        
                }
            }
        }
    
    </script>
    
    <style lang="scss" scoped>
        
    </style>
    <template>
       
        <div id="content">    
           我是详情页面
        </div>
    </template>
    
    
    <script>
        
    
    
        export default{
    
            data(){
    
                return{
    
                    msg:'数据'
                }
            },
            mounted(){
    
                    console.log(this.$route.params);  /*获取动态路由传值*/
    
            }
    
        }
    </script>
  • 相关阅读:
    2019-11-12-WPF-添加窗口消息钩子方法
    2018-11-21-WPF-解决-ViewBox--不显示线的问题
    ARRAY_SIZE宏
    tcp校验和
    arp命令
    sk_buff
    printf打印字节
    dmesg命令
    insmod/rmmod
    ifup/ifdown
  • 原文地址:https://www.cnblogs.com/loaderman/p/11058278.html
Copyright © 2011-2022 走看看