使用<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)刷新的問題。