一、前言
1、导航滑动实现
2、渲染列表信息时让一开始加载的时候就请求数据
实现用户访问网站时可能执行的三个操作)
二、主要内容
1、导航滑动实现:
(1)演示效果:
(2)代码实现
<!--导航栏用ul li实现-->
<ul>
<li v-for='(item,index) in categoryList' :key='index'>
<a href="javascript:;">{{item.title}}</a>
</li>
</ul>
</div>
<style>
li {
list-style: none;
display: inline-block;
margin-left: 10px;
height: 30px;
}
ul {
/*强制不换行*/
white-space: nowrap;
overflow-x: auto;
padding-left: 0px;
margin: 5;
}
</style>
2、渲染列表信息时让一开始加载的时候就请求数据
(1)在methods里面封装一个请求的方法
export default{
name:'PhotoList',
data(){
return{
categoryList,
title_h:'图文分享'
}
},
methods:{
loadImageByCategoryId(id){ //这里传入请求的id
this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d'+id)
.then(res=>{
console.log(res.data.result.data)
})
.catch(err=>{
console.log('数据获取失败',err);
})
}
}
}
(2)在created()中最开始就调用这个方法
created(){
this.loadImageByCategoryId(0);//0表示所有的数据
this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
.then(res=>{
console.log(res.data.result.data)
})
.catch(err=>{
console.log('新闻数据获取失败',err)
})
}
(3)当图片过多的时候需要设置图片懒加载(n+1)模式,这里用mint-ui里面的v-lazy
//Mint-ui里面的图片懒加载
<img v-lazy='item.img_url'>
3、根据路由的改变,加载图文的改变(牵涉到动态路由的匹配:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化)
官网上明确告诉我们:当路由从/user/foo 导航到 /user/bar, 原来的组件实例会被复用。因为两个路由都渲染同一个组件,比起销毁再创建,复用显得更加高效。不过,这意味着组件的生命周期钩子不会再被调用。复用组件时,如果想对不同的路由参数做出不同的响应的时候,此时可以用1)watch监听 2)使用beforeRouteUpdate导航守卫
操作一:在当前网站中,直接在url输入动态路由
(1)下面用beforeRouteUpdate(to, from, next){ }来实现
methods:{
loadImageByCategoryId(id){ //这里传入请求的id
this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
.then(res=>{
console.log(res.data.result.data)
})
.catch(err=>{
console.log('数据获取失败',err);
})
}
},
created(){
//api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d
this.loadImageByCategoryId(0);//0表示所有的数据
this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
.then(res=>{
console.log(res.data.result.data)
})
.catch(err=>{
console.log('新闻数据获取失败',err)
})
},
beforeRouteUpdate(to, from, next){
//在当前路由改变,但是该组价被复用时调用
//举例来说,对于一个带有动态参数的路径/foo/:id 在/foo/1 和 /foo/2之间跳转的时候
//由于会渲染同样的Foo组件,因此组件实例会被复用。这个钩子在这个时候就会被调用
console.log(to);//to是目的
this.loadImageByCategoryId(to.params.categoryId); //拿到里面的路由参数调用上面封装的请求方法,就会根据不同的参数请求到不同类型的数据
}
}
操作二:很多时候通过点击上面的滑动导航改变路由
(1)给每个导航li标签注册点击事件,然后将当前的id传进去
<div class="photo-header">
<ul>
<li v-for='(category,index) in categoryList' :key='index' @click='categoryHandler(category.id)'>
<router-link :to="category.routerName" exact @click.native ='changeHash()'>{{item.title}}</router-link>
</li>
</ul>
</div>
(2)在method中定义这个categoryHandler点击事件,
categoryHandler(id){
this.$router.push({name:'photo.list'}, params:{categoryId:id}) //当用户点击之后就会跳转到这个路由,然后再执行beforeRouterUpdate方法
},
(3)执行beforeRouteUpdate方法,重新根据不同路由参数请求数据
beforeRouteUpdate(to, from, next){
//在当前路由改变,但是该组价被复用时调用
//举例来说,对于一个带有动态参数的路径/foo/:id 在/foo/1 和 /foo/2之间跳转的时候
//由于会渲染同样的Foo组件,因此组件实例会被复用。这个钩子在这个时候就会被调用
console.log(to);//to是目的
this.loadImageByCategoryId(to.params.categoryId); //拿到里面的路由参数调用上面封装的请求方法,就会根据不同的数据请求到不同类型的数据
}
操作三:用户可能关闭了当前的网站,然后从浏览器另一个网页中直接拿这个路由来刷新(这个时候路由没有更新)
(1)用beforeRouteEnter
beforeRouteEnter(to, from, next){
//在渲染该组件的对应路由被confirm前调用
//不能获取组件实例this
//因为当守卫执行前,组件实例还没有被创建
next(vm =>{
vm.loadImageByCategoryId(to.params.categoryId)
})
},
结合以上三个操作就可以实现,通过点击不同导航li标签,渲染不同类型的数据, 可以通过在当前网站上输入不同的动态路由参数,渲染不同的数据,还可以从别的网站进来,渲染不同的数据
三、总结
结合以上三个操作就可以实现,通过点击不同导航li标签,渲染不同类型的数据, 可以通过在当前网站上输入不同的动态路由参数,渲染不同的数据,还可以从别的网站进来,渲染不同的数据