列表页 nowPlack
<template>
<div>
nowPlack列表页 films的子页面,
<ul>
<li v-for="(item,id) in List" :key="id" @click="handClickPage(id)">
<img :src="item.url" alt="">
{{item.name}}
{{item.id}}
<!-- 列表跳详情,声明式写法,需要传参给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(id){
console.log(id)
//编程式导航 1
// location.href = '#/detal'
//编程式导航 2 可以避免忘写 #
this.$router.push(`/detal/${id}`)//router拿到的是(配置的)整个路由对象
}
}
}
</script>
命名式路由js代码
<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(id){
//通过命名路由跳转
this.$router.push({
name:'detal',
params:{
id
}
})
}
}
}
</script>
详情页 detal
<template>
<div>
detal详情页 点击nowPlack的列表项跳转详情
</div>
</template>
<script>
export default {
data(){
return{
}
},
created(){
//console.log('created',location.href)//拿到的是路径
//route拿到的是当前匹配的路由
console.log('created',this.$route.params.id)
//axios利用id发请求到详情接口,获取详情数据,布局页面
}
}
</script>
路由写法
{
path:'/films',
component:Films,
children:[
//嵌套的页面(列表页)
{
path:'/films/nowPlack',
component:NowPlack
},
{
path:'/films/comeSinge',
component:comeSinge
},
{
path:'/films',
redirect:'/films/nowPlack'
}
]
},
{
//动态路由 :是固定 id是可以自定义的
//这里匹配到了二级路由,也可以匹配三级四级,在:id后面依次在加上三级四级详情页的跳转i路径,我这里主要是根据id识别判定的每一项的详情页
path:'/detal/:id',
component:Detal
},
命名式路由写法
{
path:‘/films’,
component:Films,
children:[
//嵌套的页面(列表页)
{
path:‘/films/nowPlack’,
component:NowPlack
},
{
path:‘/films/comeSinge’,
component:comeSinge
},
{
path:‘/films’,
redirect:‘/films/nowPlack’
}
]
},
//命名路由
{
name:‘detal’,
path:‘/detal/:id’,
component:Detal
},