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>
 <div class="hello">
 <h2>vue</h2>
 <h3>{{msg}}</h3>
 <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">
 <h2>{{msg}}</h2>
 <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 擴展

假設現在有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>
 <div class="list">
 <h2>{{msg}}</h2>
 <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">
 <h2>{{msg}}</h2>
 <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">
 <h2>vue</h2>
 <h3>{{msg}}</h3>
 <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組件請求數據(包括點擊鏈接和瀏覽器后退按鈕).

上述就是小編為大家分享的keep-alive怎么在vue2項目中使用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。