实现的最终界面
实现的功能:
步骤
- list的部分:
重点:根据activeClass和当前子分类的id判断显示类名
<ul class="info-list">
<li
v-for="(item,index) in cateList"
:key="item.id" class="info-item"
>
<router-link :to="'/info/' + item.id" :class="{active: activeClass == 'hot' && item.id == 0 || activeClass == 'life' && item.id == 3 || activeClass == 'train' && item.id == 2}" class="info-lk">{{item.title}}</router-link>
</li>
</ul>
- 列表详情页面 info-every
重点: :to=" ‘info/detail/’ + item.id"
引用: <info-every :list="list"></info-every>
info-every的内容:
<template>
<!-- 每条被渲染的数据 -->
<div class="con">
<ul class="news-list">
<li class="news-item" v-for="(item,index) in list" :key="index">
<router-link class='news-lk' :to="'/info/detail/' + item.id">
<div class="desc">
<div class="name">{{item.title}}</div>
<div class="time">{{item.add_time}}</div>
</div>
<img src="~@/assets/img/info/hot1.jpg" alt="">
</router-link>
</li>
</ul>
</div>
</template>
<script>
import api from '../../api/index.js';
export default {
props: ['list'],
data() {
return {
id: ''
}
}
}
</script>
- 到info/detail页面取出相应的id,显示相应的yemian
mounted() {
const id = this.$route.params.id;
api.getInfoDetail(id).then((res) => {
this.data = res.data;
this.content = this.data.data.content;
console.log(this.data.data)
})
}