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>