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>