溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

深入理解vue-router之keep-alive

發(fā)布時(shí)間：2020-10-09 19:32:07 來(lái)源：腳本之家 閱讀：169 作者：RoamIn 欄目：web開(kāi)發(fā)

本文基于 Vue2.0

keep-alive 簡(jiǎn)介

keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

用法也很簡(jiǎn)單：

<keep-alive>
 <component>
  <!-- 該組件將被緩存！ -->
 </component>
</keep-alive>

props

  • include - 字符串或正則表達(dá)，只有匹配的組件會(huì)被緩存
  • exclude - 字符串或正則表達(dá)式，任何匹配的組件都不會(huì)被緩存
// 組件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}
<keep-alive include="a">
 <component>
  <!-- name 為 a 的組件將被緩存！ -->
 </component>
</keep-alive>可以保留它的狀態(tài)或避免重新渲染
<keep-alive exclude="a">
 <component>
  <!-- 除了 name 為 a 的組件都將被緩存！ -->
 </component>
</keep-alive>可以保留它的狀態(tài)或避免重新渲染

遇見(jiàn) vue-router

router-view 也是一個(gè)組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會(huì)被緩存：

<keep-alive>
  <router-view>
    <!-- 所有路徑匹配到的視圖組件都會(huì)被緩存！ -->
  </router-view>
</keep-alive>

然而產(chǎn)品汪總是要改需求，攔都攔不住...

問(wèn)題

如果只想 router-view 里面某個(gè)組件被緩存，怎么辦？

  • 使用 include/exclude
  • 增加 router.meta 屬性

使用 include/exclude

// 組件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}
<keep-alive include="a">
  <router-view>
    <!-- 只有路徑匹配到的視圖 a 組件會(huì)被緩存！ -->
  </router-view>
</keep-alive>

exclude 例子類(lèi)似。

缺點(diǎn)：需要知道組件的 name，項(xiàng)目復(fù)雜的時(shí)候不是很好的選擇

增加 router.meta 屬性

// routes 配置
export default [
 {
  path: '/',
  name: 'home',
  component: Home,
  meta: {
   keepAlive: true // 需要被緩存
  }
 }, {
  path: '/:id',
  name: 'edit',
  component: Edit,
  meta: {
   keepAlive: false // 不需要被緩存
  }
 }
]
<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 這里是會(huì)被緩存的視圖組件，比如 Home！ -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 這里是不被緩存的視圖組件，比如 Edit！ -->
</router-view>

優(yōu)點(diǎn)：不需要例舉出需要被緩存組件名稱(chēng)

【加鹽】使用 router.meta 拓展

假設(shè)這里有 3 個(gè)路由： A、B、C。

需求：

  • 默認(rèn)顯示 A
  • B 跳到 A，A 不刷新
  • C 跳到 A，A 刷新

實(shí)現(xiàn)方式

在 A 路由里面設(shè)置 meta 屬性：

{
  path: '/',
  name: 'A',
  component: A,
  meta: {
    keepAlive: true // 需要被緩存
  }
}

在 B 組件里面設(shè)置 beforeRouteLeave：

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
     // 設(shè)置下一個(gè)路由的 meta
    to.meta.keepAlive = true; // 讓 A 緩存，即不刷新
    next();
  }
};

在 C 組件里面設(shè)置 beforeRouteLeave：

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 設(shè)置下一個(gè)路由的 meta
    to.meta.keepAlive = false; // 讓 A 不緩存，即刷新
    next();
  }
};

這樣便能實(shí)現(xiàn) B 回到 A，A 不刷新；而 C 回到 A 則刷新。

總結(jié)

路由大法不錯(cuò)，不需要關(guān)心哪個(gè)頁(yè)面跳轉(zhuǎn)過(guò)來(lái)的，只要 router.go(-1) 就能回去，不需要額外參數(shù)。

然而在非單頁(yè)應(yīng)用的時(shí)候，keep-alive 并不能有效的緩存了= =

參考

issues#811
vue#keep-alive
vue2.0 keep-alive最佳實(shí)踐

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手