不废话,先上组件文件pages.vue:
使用方法:
在需要分页的地方使用分页组件标签,比如这里的order.vue:
在data中设置当前页和总页面的默认值
考虑一下我们希望我们点击页数按钮后发生什么
首先,点击某页数时路由会改变页数,从路由获取当前页
接着,我们希望有一个getorderfromServer方法将当前页数发送给服务器,再将返回的数据更新在页面上
最后调用的方法:
{
if (code == 200) {
this.Orderlist = data.list;
this.totalPage = data.totalPage;
}
this.loading = false;
}).catch(err => {
this.tip('服务内部错误','error');
this.Orderlist = {};
this.loading = false;
});
},}
注意通过路由对方法作出响应,每次路由改变都调用此方法以更新页面
还要对路由信息进行改造,让每一页(尤其是第一页)都有路由页数信息,可以对第一页进行重定向以达到目的:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。