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>
  • 相关阅读:
    模拟展示动态按钮
    模拟界面请求到web服务器
    bean的生命周期
    structs2的action实现方式
    annotation中的Autowired
    华为笔试题练习
    开发工具
    [转]Linux双向链表的知识
    【转】 嵌入式C语言编程中Inline函数的应用
    打印格式化printf
  • 原文地址:https://www.cnblogs.com/loaderman/p/11058278.html
Copyright © 2011-2022 走看看