keep-alive 是Vue的內置組件，能在組件切換過程中將狀態(tài)保留在內存中，防止重復渲染DOM。結合vue-router中使用，可以緩存某個view的整個內容。
基本使用如下：
<keep-alive> <component> <!-- 該組件將被緩存！ --> </component></keep-alive>
一般有這樣的需求，當我們第一次進入列表頁需要請求一下數據，當我從列表頁進入詳情頁，詳情頁不緩存也需要請求下數據，然后返回列表頁
有兩個情況：
1. 直接點擊瀏覽器的后退返回按鈕。
2. 點擊導航欄中的 /list的鏈接返回。
那么針對第一種情況下，我們直接通過后退按鈕時，返回到列表頁(/list) 是不需要請求數據。
針對第二種情況下，我們通過鏈接返回到列表頁是需要請求數據。
所以這邊有三種情況：
1. 默認進來列表頁需要請求數據。
2. 進入詳情頁后，通過瀏覽器默認后退按鈕返回，是不需要ajax的請求的。
3. 進入詳情頁后，通過點擊鏈接返回到列表頁后，也是需要發(fā)ajax請求的。
配置如下：
1. 入口文件 app.vue 的配置如下：
<!-- 緩存所有的頁面 --><keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view></keep-alive><router-view v-if="!$route.meta.keep_alive"></router-view>
2. 在router中設置meta屬性，設置 keepAlive: true 表示需要使用緩存，false的話表示不需要使用緩存。且添加滾動行為 scrollBehavior
router/index.js 的配置如下：
import Vue from 'vue';import Router from 'vue-router';// import HelloWorld from '@/views/HelloWorld';Vue.use(Router);const router = new Router({ mode: 'history', // 訪問路徑不帶井號 需要使用 history模式，才能使用 scrollBehavior base: '/page/app', // 配置單頁應用的基路徑 routes: [ { path: '/', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懶加載 meta: { keepAlive: true // true 表示需要使用緩存 } }, { path: '/list', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懶加載 meta: { keepAlive: true // true 表示需要使用緩存 false表示不需要被緩存 } }, { path: '/detail', name: 'detail', component: resolve => require(['@/views/detail'], resolve) // 使用懶加載 } ], scrollBehavior (to, from, savedPosition) { // 保存到 meta 中，備用 to.meta.savedPosition = savedPosition; if (savedPosition) { return { x: 0, y: 0 }; } return {}; }});export default router;3. list.vue 代碼如下：
<template> <div class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/detail">跳轉到detail頁</router-link> </div></template><script>export default { name: 'helloworld', data () { return { msg: 'Welcome to Your Vue.js App' }; }, methods: { ajaxRequest() { const obj = { 'aa': 1 }; Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => { console.log(res); }); } }, beforeRouteEnter(to, from, next) { next(vm => { /* 如果 to.meta.savedPosition === undefined 說明是刷新頁面或可以叫第一次進入頁面 需要刷新數據 如果savedPosition === null, 那么說明是點擊了導航鏈接; 此時需要刷新數據，獲取新的列表內容。 否則的話 什么都不做，直接使用 keep-alive中的緩存 */ if (to.meta.savedPosition === undefined) { vm.ajaxRequest(); } if (to.meta.savedPosition === null) { vm.ajaxRequest(); } }) }};</script>4. detail.vue 代碼如下：
<template> <div class="list"> <h1>{{msg}}</h1> <router-link to="/list">返回列表頁</router-link> </div></template><script>export default { name: 'list', data () { return { msg: 'Welcome to Your Vue.js App' }; }, created() { this.ajaxRequest(); }, methods: { ajaxRequest() { const obj = { 'aa': 1 }; Promise.all([this.$store.dispatch('withdary', obj)]).then((res) => { console.log(res); }); } }};</script>二：使用router.meta 擴展
假設現(xiàn)在有3個頁面，需求如下：
1. 默認有A頁面，A頁面進來需要一個請求。
2. B頁面跳轉到A頁面，A頁面不需要重新請求。
3. C頁面跳轉到A頁面，A頁面需要重新請求。
實現(xiàn)方式如下：
在 A 路由里面設置 meta 屬性：
{ path: '/a', name: 'A', component: resolve => require(['@/views/a'], resolve), meta: { keepAlive: true // true 表示需要使用緩存 }}所以router/index下的所有代碼變?yōu)槿缦拢?/p>
import Vue from 'vue';import Router from 'vue-router';// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({ mode: 'history', // 訪問路徑不帶井號 需要使用 history模式，才能使用 scrollBehavior base: '/page/app', // 配置單頁應用的基路徑 routes: [ { path: '/', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懶加載 meta: { keepAlive: true // true 表示需要使用緩存 } }, { path: '/list', name: 'list', component: resolve => require(['@/views/list'], resolve), // 使用懶加載 meta: { keepAlive: true // true 表示需要使用緩存 false表示不需要被緩存 } }, { path: '/detail', name: 'detail', component: resolve => require(['@/views/detail'], resolve) // 使用懶加載 }, { path: '/a', name: 'A', component: resolve => require(['@/views/a'], resolve), meta: { keepAlive: true // true 表示需要使用緩存 } }, { path: '/b', name: 'B', component: resolve => require(['@/views/b'], resolve) }, { path: '/c', name: 'C', component: resolve => require(['@/views/c'], resolve) } ], scrollBehavior (to, from, savedPosition) { // 保存到 meta 中，備用 to.meta.savedPosition = savedPosition; if (savedPosition) { return { x: 0, y: 0 }; } return {}; }});export default router;在 B 組件里面設置 beforeRouteLeave
beforeRouteLeave(to, from, next) { // 設置下一個路由meta to.meta.keepAlive = true; // 讓A緩存，不請求數據 next(); // 跳轉到A頁面}B組件所有代碼如下：
<template> <div class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a頁面</router-link> </div></template><script>export default { name: 'list', data () { return { msg: 'Welcome to B Page' }; }, created() {}, methods: { }, beforeRouteLeave(to, from, next) { // 設置下一個路由meta to.meta.keepAlive = true; // 讓A緩存，不請求數據 next(); // 跳轉到A頁面 }};</script>在 C 組件里面設置 beforeRouteLeave：
beforeRouteLeave(to, from, next) { // 設置下一個路由meta to.meta.keepAlive = false; // 讓A不緩存，重新請求數據 console.log(to) next(); // 跳轉到A頁面}c組件所有代碼如下：
<template> <div class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a頁面</router-link> </div></template><script>export default { name: 'list', data () { return { msg: 'Welcome to B Page' }; }, created() {}, methods: { }, beforeRouteLeave(to, from, next) { // 設置下一個路由meta to.meta.keepAlive = false; // 讓A不緩存，重新請求數據 console.log(to) next(); // 跳轉到A頁面 }};</script>a組件內的所有的代碼如下：
<template> <div class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/b">跳轉到b頁面</router-link> <router-link to="/c">跳轉到c頁面</router-link> </div></template><script>export default { name: 'helloworld', data () { return { msg: 'Welcome to A Page' }; }, methods: { ajaxRequest() { const obj = { 'aa': 1 }; Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {}); } }, beforeRouteEnter(to, from, next) { next(vm => { /* 如果 to.meta.savedPosition === undefined 說明是刷新頁面或可以叫第一次進入頁面 需要刷新數據 如果to.meta.keepAlive === false, 那么說明是需要請求的; 此時需要刷新數據，獲取新的列表內容。 否則的話 什么都不做，直接使用 keep-alive中的緩存 */ if (to.meta.savedPosition === undefined) { vm.ajaxRequest(); } if (!to.meta.keepAlive) { vm.ajaxRequest(); } }) }};</script>注意 b組件到a組件不重新請求數據 (包括點擊鏈接和瀏覽器后退按鈕)，c組件到a組件請求數據(包括點擊鏈接和瀏覽器后退按鈕).
總結
以上所述是小編給大家介紹的vue2中的keep-alive使用總結及注意事項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
