這次帶給大家keep-alive在vue2中應該怎樣使用,keep-alive在vue2中使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
keep-alive 是Vue的內建元件,能在元件切換過程中將狀態保留在記憶體中,防止重複渲染DOM。結合vue-router中使用,可以快取某個view的整個內容。
基本使用如下:
<keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive>
一般有這樣的需求,當我們第一次進入列表頁需要請求一下數據,當我從列表頁進入詳情頁,詳情頁不緩存也需要請求下數據,然後返回列表頁
# 有兩個情況:
# 1. 直接點選瀏覽器的後退返回按鈕。
2. 點選導覽列中的 /list的連結返回。
那麼針對第一種情況下,我們直接透過後退按鈕時,返回清單頁(/list) 是不需要請求資料。
針對第二種情況下,我們透過連結回到清單頁是需要請求資料。
所以這邊有三種情況:
# 1. 預設進來列表頁需要請求資料。
2. 進入詳情頁後,透過瀏覽器預設後退按鈕返回,是不需要ajax的請求的。
3. 進入詳情頁後,透過點擊連結回到清單頁後,也是需要發出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> <p class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/detail">跳转到detail页</router-link> </p> </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> <p class="list"> <h1>{{msg}}</h1> <router-link to="/list">返回列表页</router-link> </p> </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 擴充
假設現在有3個頁面,需求如下:
# 1. 預設有A頁面,A頁面進來需要一個請求。
2. B頁面跳到A頁面,A頁面不需要重新要求。
3. C頁面跳到A頁面,A頁面需要重新請求。
實作方式如下:
在 A 路由裡面設定 meta 屬性:
{ path: '/a', name: 'A', component: resolve => require(['@/views/a'], resolve), meta: { keepAlive: true // true 表示需要使用缓存 } }
所以router/index下的所有程式碼變成如下:
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> <p class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a页面</router-link> </p> </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> <p class="list"> <h1>{{msg}}</h1> <router-link to="/a">返回a页面</router-link> </p> </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> <p class="hello"> <h1>vue</h1> <h2>{{msg}}</h2> <router-link to="/b">跳转到b页面</router-link> <router-link to="/c">跳转到c页面</router-link> </p> </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元件請求資料(包括點擊連結和瀏覽器後退按鈕).
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是keep-alive在vue2中應該怎樣使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!