{name:'国际新闻信息'},
{name:'国际新闻信息'}
] }
}
}
</script>
gn.vue：
<template>
<div>
国内新闻信息：<br/>
<ul >
<li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list: [
{name:'国内新闻信息'},
{name:'国内新闻信息'}
] }
}
}
</script>zx.vue：
<template>
<div>
最新新闻信息：<br/>
<ul >
<li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list: [
{name:'最新新闻信息'},
{name:'最新新闻信息'}
] }
}
}
</script>1-3-1 routers/yl/index.vue
<template>
<div>
娱乐页面信息：<br/>
<router-link class="rlink" :class="{active:selected == 1}" @click.native="tabck(1)">最新娱乐</router-link>
<router-link class="rlink" :class="{active:selected == 2}" @click.native="tabck(2)">明星娱乐</router-link>
<router-link class="rlink" :class="{active:selected == 3}" @click.native="tabck(3)">焦点娱乐</router-link> <!-- 子路由-->
<router-view/>
</div>
<script>
export default {
data(){
return {
selected: 1
}
},
methods: {
tabck(index){
this.selected = index; //设置tab选中项
}
}
}
</script>
</template>
1-3-2 routers/yl/tab/jd.vue、mx.vue、zx.vue
jd.vue：
<template>
<div>
焦点娱乐信息：<br/>
<ul >
<li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list: [
{name:'焦点娱乐信息'},
{name:'焦点娱乐信息'}
] }
}
}
</script>
mx.vue：
<template>
<div>
明星娱乐信息：<br/>
<ul >
<li v-for="(result, index) in list" :key="index">{{result.name}}{{index}}</li>
