【Vue 踩坑】解決Vue組件返回刷新的問題

使用<keep-alive>解決Vue組件返回刷新問題,下面是我的使用心得。
<keep-alive>是Vue的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM。
首先,在app.vue中修改如下代碼

<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

然后,就是給路由設(shè)置keepAlive屬性值,通過keepAlive屬性的布爾值來決定頁面要不要返回刷新

 // 以醫(yī)院列表為例
    {
      path: '/hospital_list',
      name: 'hospital_list',
      component: hospital_list,
      meta: {
        keepAlive: true
      }
    },

這樣就解決了Vue中組件返回自動(dòng)刷新的問題。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • vue概述 在官方文檔中,有一句話對(duì)Vue的定位說的很明確:Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語法來聲明...
    li4065閱讀 7,624評(píng)論 0 25
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,180評(píng)論 0 29
  • 一:什么是閉包?閉包的用處? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 10,053評(píng)論 1 52
  • emmmmm,,之前因?yàn)殚_項(xiàng)目來不及仔細(xì)讀一遍,只能是用到什么找什么,然而深感對(duì)vue了解的無力(?д?;)...
    一只神奇的小綿羊閱讀 2,026評(píng)論 0 2
  • 多多一粒閱讀 424評(píng)論 9 13

友情鏈接更多精彩內(nèi)容