頁面代碼：
列表 :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>