效果：
看下html页面
<div class="NewsDetails_cont_footer"><!-- 使用三目运算符判断 按钮是否可以点击 --><div @click="last" :class="lastNoShow ? 'noClick' : 'btn'"><img src="../assets/img/newsDetail/公共-更多2(1).png" alt="" /><span>上一篇：{{ lastTitle }}</span></div><!-- 使用三目运算符判断 按钮是否可以点击 --><div @click="next" :class="nextNoShow ? 'noClick' : 'btn'"><span>下一篇：{{ nextTitle }}</span><img src="../assets/img/newsDetail/公共-更多2(1).png" alt="" /></div></div>附上CSS
.btn {cursor: pointer;
}
.noClick {/* 不可点击 */pointer-events: none;
}首先需要在data里定义变量
data() {return {// 获取的数组，就是文章列表arrList: [{id: 0,url: require("../assets/img/youjiao/摄图网_501125646_banner_在草地上玩耍的孩子们（非企业商用）@2x.png"),h1: "发展数字经济 共享包容增长 为经济发展插上“数字翅膀””",p1: "各省、自治区、直辖市教育厅（教委）、发展改革委、工业和信息化主管部门、财政厅（局）、人力资源社会保障厅（局）、农业农村（农...",},{id: 1,url: require("../assets/img/youjiao/摄图网_501111552_banner_幼儿园老师指导画画（非企业商用）.png"),h1: "用系统思维下好“职业教育一盘大棋”",p1: "党的十九届五中全会审议通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二○三五远景目标的建议》内含了多条逻辑线...",},{id: 2,url: require("../assets/img/youjiao/摄图网_501111552_banner_幼儿园老师指导画画（非企业商用）.png"),h1: "用系统思维下好“职业教育一盘大棋2”",p1: "党的十九届五中全会审议通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二○三五远景目标的建议》内含了多条逻辑线...",},{id: 3,url: require("../assets/img/youjiao/摄图网_501111552_banner_幼儿园老师指导画画（非企业商用）.png"),h1: "用系统思维下好“职业教育一盘大棋”",p1: "党的十九届五中全会审议通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二○三五远景目标的建议》内含了多条逻辑线...",},{id: 4,url: require("../assets/img/youjiao/摄图网_501111552_banner_幼儿园老师指导画画（非企业商用）.png"),h1: "用系统思维下好“职业教育一盘大棋”",p1: "党的十九届五中全会审议通过的《中共中央关于制定国民经济和社会发展第十四个五年规划和二○三五远景目标的建议》内含了多条逻辑线...",},],//上一个显示的标题内容lastTitle: "",//下一个显示的标题内容nextTitle: "",//下一个的ID 用于跳转页面nextId: "",//上一个的ID 用于跳转页面lastId: "",// 控制按钮是否可以点击lastNoShow: "",nextNoShow: "",};},methods获取文章列表的函数
methods: {getAllList() {// 我这是把这个给变成子组件了 获取你文章的ID 用来进行匹配当前的页面// 父组件写了什么可以看文章下面let id = this.$parent.artcleID;// 使用ForEach遍历数组 进行当前页面的判断this.arrList.forEach((item, index) => {// 如果我们父组件里定义的id 等于 index了 就相当找到当前的页面了if (index == id) {// 在这个里面再进行判断 目的是为了 当文章列表里没有内容了的时候if (index >= length - 1) {// 把 下一篇 按钮的内容变成 无 this.nextTitle = "无";//然后把这个nextNoShow 禁止点击的 变量的值变成true// 这样三目运算符就可以加结果为True的 class类名了 就是禁止点击了this.nextNoShow = true;// 这个 else 是 当你文章里还有内容 执行下面的操作} else {// 改变你下一篇标题显示的内容 为 下个index里显示的标题this.nextTitle = this.arrList[index + 1].h1;// 把nextID 的值也变成下个index 里 id的值 为了进行页面的跳转this.nextId = this.arrList[index + 1].id;// 把下一篇变成可以点击的状态,因为这个else里 下一篇还有内容this.nextNoShow = false;}// 这个和上面一样if (index == 0) {this.lastTitle = "无";this.lastNoShow = true;} else {this.lastTitle = this.arrList[index - 1].h1;this.lastId = this.arrList[index - 1].id;this.lastNoShow = false;}}});},//点击上一篇文章时;last() {this.$router.push({// 拼接 lastID 和我们定义的这个地址，就能实现跳转了path: "/newsxiangqing" + this.lastId,});},//点击下一篇文章时next() {this.$router.push({path: "/newsxiangqing" + this.nextId,});},},函数需要在页面创建前执行
//页面创建前执行一下这个函数created() {this.getAllList();},我用的时候是把这个功能变成了子组件，下面是我父组件写的变量
