当前位置: 首页 > news >正文

keep-alive缓存文章列表案例完整代码(Vue2)

keep-alive缓存文章列表案例完整代码(Vue2)

  • 环境准备
  • 目录结构
  • 完整代码
    • `main.js`
    • `App.vue`
    • `ArticleList.vue`
    • `ArticleDetail.vue`
    • `router.js`
  • Vue3 版本

环境准备

先创建一个 vue2 项目

vue create 项目名

安装 vue-router,vue2 是 3,vue3 是 4

npm insatll vue-router@3

目录结构

在这里插入图片描述

完整代码

main.js

这里要注册路由

import Vue from "vue";
import App from "./App.vue";
import router from "./router";Vue.config.productionTip = false;new Vue({router,render: (h) => h(App),
}).$mount("#app");

App.vue

两种写法:

  1. 可以用include里面写需要缓存的组件名称 name,这样的话就要在 router/index.js 中给组件写name。

    router/index.js

    routes: [{path: "/list",component: ArticleList,name: "ArticleList",},// ...
    

    App.vue

    <template><div>// <keep-alive :includes="['ArticleList',...]"><keep-alive includes="ArticleList"><router-view /></keep-alive></div>
    </template>
    
  2. 在 meta 中写明这个组件是否需要被缓存,然后在 Vue.js 中根据不同的值判断这个组件是否需要被 keep-alive 包裹,即是否被缓存。
    router/index.js

    routes: [{path: "/list",component: ArticleList,meta: { keepAlive: true },name: "ArticleList",},// ...
    

    App.vue

    <template><div><keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" /></div>
    </template>
    

ArticleList.vue

<template><div><div v-for="item in articles" :key="item.id" class="item"><router-link :to="{ name: 'ArticleDetail', query: { id: item.id } }">{{ item.title }}</router-link></div></div>
</template><script>
export default {name: "ArticleList",data() {return {articles: [],scrollTop: 0,};},mounted() {// console.log("mounted");this.articles = this.fakeFetch();window.addEventListener("scroll", this.handleScroll);},// 进入文章列表页面时activated() {this.$nextTick(() => {// console.log("activated:", this.scrollTop);window.scrollTo(0, this.scrollTop);window.addEventListener("scroll", this.handleScroll);});},// 离开文章列表页面时deactivated() {// console.log("deactivated:" + this.scrollTop);// 将当前的位置保存下来window.removeEventListener("scroll", this.handleScroll);},methods: {fakeFetch() {return Array.from({ length: 100 }, (_, i) => ({id: i + 1,title: "文章标题 " + (i + 1),}));},handleScroll() {this.scrollTop = window.scrollY || document.documentElement.scrollTop;// console.log("滚动位置:", this.scrollTop);},},
};
</script><style>
.item {padding: 16px;border-bottom: 1px solid #eee;
}
</style>

ArticleDetail.vue

<template><div><h2>文章详情 {{ $route.query.id }}</h2><p>内容详情...</p><router-link to="/list">返回列表</router-link></div>
</template>
<script>
export default {name: "ArticleDetail",mounted() {// 模拟请求内容console.log("详情页 mounted,ID:", this.$route.query.id);},
};
</script>

router.js

import Vue from "vue";
import Router from "vue-router";
import ArticleList from "@/components/ArticleList.vue";
import ArticleDetail from "@/components/ArticleDetail.vue";Vue.use(Router);export default new Router({routes: [{path: "/list",component: ArticleList,meta: { keepAlive: true },name: "ArticleList",},{path: "/detail",component: ArticleDetail,meta: { keepAlive: false },name: "ArticleDetail",},],
});

Vue3 版本

keep-alive缓存文章列表案例完整代码(Vue3)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/254988.html

相关文章:

  • 汽车整车厂如何用数字孪生系统打造“透明车间”
  • King’s LIMS 系统引领汽车检测实验室数字化转型
  • 【工具使用-VScode】VScode如何设置空格和tab键显示
  • JS API接入说明
  • 多模态能解决什么样的业务场景?
  • Python内存使用分析工具深度解析与实践指南(上篇)
  • 装饰器模式深度解析:Java设计模式实战指南与动态功能扩展最佳实践
  • 《Go语言圣经》函数值、匿名函数递归与可变参数
  • NVIDIA开源Fast-dLLM!解析分块KV缓存与置信度感知并行解码技术
  • (链表:哈希表 + 双向链表)146.LRU 缓存
  • React Native【实战范例】弹跳动画菜单导航
  • 基于微信小程序的美食点餐订餐系统
  • 【Dify学习笔记】:RagFlow接入Dify基础教程
  • Flowise工作流引擎的本地部署与远程访问实践
  • Python 操作 MySQL 数据库
  • EfficientVLA:面向视觉-语言-动作模型无训练的加速与压缩
  • Linux——linux的基本命令
  • 全面掌握 C++ 基础:关键特性与进化
  • 深入理解 Git:从版本控制原理到企业级实践
  • 医疗AI大数据处理流程的全面解析:从数据源到应用实践
  • 【世纪龙科技】智能网联汽车装调仿真教学软件数智化赋能实训教学
  • 有方 N58 LTE Cat.1 模块联合 SD NAND 贴片式 TF 卡 MKDV1GIL-AST,打造 T-BOX 高性能解决方案
  • 解锁数据宝藏:数据挖掘之数据预处理全解析
  • react扩展
  • Flutter ListTile 深度解析
  • 一[3.4]、ubuntu18.04环境 利用 yolov8n-seg实现“列车轨道”区域分割,并提取正确的轨道线【全网最详细】
  • 退出python解释器的四种方式
  • Flang:LLVM Fortran 前端简介
  • IPv4编址及IPv4路由基础
  • python画三维立体图