<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>
