深圳罗湖企业网站建设百度推广竞价

环境准备

先创建一个 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）