主页面
<template>
<div>
films页面,主页面
<div style="height:100px;background:yellow;">轮播图</div>
<div>二级声明式导航</div>
<!-- router-view相当于给孩子页面占得位置,通过这个组件,孩子页面触发的时候,孩子页面的内容将会显示出来 -->
<router-view></router-view>
</div>
</template>
子页面
<template>
<div>
nowPlack列表页 films的子页面,
<ul>
<li v-for="(item,id) in List" :key="id" @click="handClickPage()">
<img :src="item.url" alt="">
{{item.name}}
<!-- 列表跳详情,声明式写法,需要传参给to前面加上冒号 但是长列表一般不适用-->
<!-- <router-link to="/detal">{{item.usename}}</router-link> -->
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
List:[]
}
},
mounted(){
//https://m.maizuo.com
axios.get('http://rap2api.taobao.org/app/mock/279550/http/get')
.then(res=>{
console.log('rap2数据',res.data.data[0].list)
this.List = res.data.data[0].list
console.log('list数据',this.List)
})
},
methods:{
handClickPage(){
//编程式导航 1
// location.href = '#/detal'
//编程式导航 2 可以避免忘写 #
this.$router.push('/detal')
}
}
}
</script>
记得创建一个详情页
我这里是相当于nowPlack子页面是展示列表的
我给列表每一项li绑定了一个click事件,当点击li的时候,就会触发这个事件
this.$router.push(‘/detal’) 触发这个事件后跳转到了详情页detal