vue2.0提供了一個keep-alive元件用來快取元件,避免多次載入對應的元件,減少效能消耗。本文為大家介紹vue2中的keep-alive使用總結及注意事項，需要的朋友參考下吧
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 表示需要使用缓存
}
}import Vue from 'vue'; import Router from 'vue-router'; // import HelloWorld from '@/views/HelloWorld';
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;beforeRouteLeave(to, from, next) {
// 设置下一个路由meta
to.meta.keepAlive = true; // 让A缓存，不请求数据
next(); // 跳转到A页面
}<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>
beforeRouteLeave(to, from, next) {
// 设置下一个路由meta
to.meta.keepAlive = false; // 让A不缓存，重新请求数据
console.log(to)
next(); // 跳转到A页面
}<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><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>以上是在vue2中透過keep-alive如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
