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
两种写法:
-
可以用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>
-
在 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
如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!