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>
  • 相关阅读:
    从七牛云迁移图片到github
    Ajax 结构及使用
    JQuery 简单的文字超出部分隐藏下拉显示
    JQuery 动画及一些小知识点
    Jqurey DOM 操作详解
    Jquery DOM 操作列表
    文件上传以及JS链式结构
    JQuery选择器
    JQuery 基本知识
    LinQ to sql 各种数据库查询方法
  • 原文地址:https://www.cnblogs.com/loaderman/p/11058278.html
Copyright © 2011-2022 走看看