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>

 

转载于:https://www.cnblogs.com/loaderman/p/11058278.html