VUE Vue列表分页切换数据 列表到详情页路由跳转
页面代码：
列表 :to="{path:'/newsDetail',query:{id:item.id}}"获取详情页的路由id
<ul class="news-list">
<router-link v-for="item in pagerData" class="news-item" :to="{path:'/newsDetail',query:{id:item.id}}">
<div class="media-pic">
<img :src="item.avatar">
</div>
<div class="media-cont">
<h1 class="media-title ellipsis">{{item.title}}</h1>
<p class="media-abstract ellipsis-line2">{{item.abstract}}</p>
<p class="media-time">{{item.source}} | {{item.publishTime | formatDate}}</p>
</div>
</router-link>
</ul>
分页 页码大于1的时候显示：
<div v-if="pageCount>1" class="pagination-cont">
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="this.total">
</el-pagination>
</div>
Js:
<script>
import {formatDate} from '../../common/js/date.js'; //引入时间转换函数
const ERR_OK = 0;
export default {
data() {
return {
news: [], //新闻列表数据
pagerData:[], //当前分页数据
curPage: 1, //当前页码
pageSize: 6, //当前分页数据条数
total: 20, //数据总条数
pageCount: 1 //分页数
};
},
components: {
},
created:function(){
this.getList(); //初始化加载数据
},
methods: {
//获取数据
getList(){
this.$http.get('/api/news').then((response) => {
response = response.body;
if(response.errno === ERR_OK){
this.news = response.data;
this.total= this.news.length;
this.pageCount = Math.ceil(this.total / this.pageSize);//分页数
var newPageInfo = [];
for(var i = 0; i < this.pageSize; i++){
var index = i+(this.curPage-1)*this.pageSize;
if(index>this.total-1)break;
newPageInfo[newPageInfo.length] = this.news[index];
}
this.pagerData = newPageInfo; //分页数据
//console.log(this.pageCount);
}
});
},
handleSizeChange(val) {
//console.log(val);
},
handleCurrentChange(val) {
//console.log(val);
this.curPage = val
this.getList(); //切换分页改变列表数据
},
},
filters: {
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
},
}
</script>
详情页面代码：
<template>
<div class="container">
<div v-for="(item, index) in this.detail" v-show="item.id==detailId">
<h1 class="title_bline">{{item.title}}</h1>
<div class="content" >
<p class="media-time">
{{item.source}} {{item.publishTime | formatDate}} <span :size="size">浏览：{{size}}</span>
</p>
<p v-html="item.content"></p>
<img :src="item.avatar">
</div>
</div>
</div>
</template>
Js：
<script>
import {formatDate} from '../../common/js/date.js';
const ERR_OK = 0;
export default {
data() {
return {
detail: [],
size: 4,
detailId:'',
};
},
created:function(){
this.getList();
},
methods:{
getList(){
this.$http.get('/api/news').then((response) => {
response = response.body;
if(response.errno === ERR_OK){
this.detail = response.data;
this.detailId = this.$route.query.id //当前数据的ID等于跳转路由的ID
console.log(this.detailId);
}
});
},
},
filters: {
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
},
}
</script>
