发表于: 2020-01-09 23:00:15
1 1355
今天完成的事情:
1.目前路由的参数改变会让页数也对应跳转
明天计划的事情:
1.继续推进
遇到的问题和收获:
1.之前是用this.$router.push(XXX,params)来传参。
此处用了
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.queryInfo.page = val;
this.$router.push({
path: this.$route.path,
query: {numPage: this.$route.query.numPage ? this.$route.query.numPage : 10, currentPage: val}
})
this.getArticleList()//page值改变了,所以要重新获取数据传过去
},
可以在element-ui分页组件el-pagination翻页的时候改变url地址栏的参数,获取数据的时候参数再从url地址栏获取。
这样即使页面刷新了也能传递给后台之前的参数,获得之前页面的数据。
然后为了让路由参数手动修改后页码也能对应变化,用了watch方法监视。
watch: {
// 如果路由有变化,会再次执行该方法
'$route'(to,from){
this.queryInfo.size = Number(this.$route.query.numPage ? this.$route.query.numPage : 10)
this.queryInfo.page = Number(this.$route.query.currentPage ? this.$route.query.currentPage : 1)
this.getArticleList()
}
}
检测到路由变化就会执行。详细理解还不太清楚。
还有就是此处任务,vue对应的步骤是否是使用依赖注入服务,然后使用依赖注入服务把分页器进行打包为单独组件。
莫得思路
评论