vue menu不刷新如何解決

今天小編給大家分享一下vue menu不刷新如何解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue menu不刷新的解決辦法：1、在index頁面編寫“<router-view v-if="!$route.meta.keepAlive"></router-view>”；2、將緩存name設(shè)置為“test-keep-alive”；3、在router文件配置“{path: '/Material',name: 'Material'...}”即可。

vue 實(shí)現(xiàn)組件切換tab（菜單）頁不刷新頁面

vue 實(shí)現(xiàn)組件切換tab(菜單)頁不刷新頁面（keep alive）

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

官網(wǎng)解釋

<keep-alive>包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 相似， 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。 當(dāng)組件在 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。 在 2.2.0 及其更高版本中，activated 和 deactivated 將會(huì)在 樹內(nèi)的所有嵌套組件中觸發(fā)。 主要用于保留組件狀態(tài)或避免重新渲染。

應(yīng)用場(chǎng)景

比如在做有切換組件的功能的系統(tǒng)時(shí)，一般都是在index頁面里放置標(biāo)簽，再加上router文件配置的父子組件關(guān)系以及路由跳轉(zhuǎn)，實(shí)現(xiàn)組件渲染頁面。但是這樣的效果是每點(diǎn)擊一次組件，就會(huì)重新渲染一次也面，頁面上的數(shù)據(jù)就不會(huì)被保留下來。因此，使用<keep-alive>標(biāo)簽包裹著<router-alive>標(biāo)簽就可以實(shí)現(xiàn)把不活動(dòng)的組件緩存下來，返回后仍有原來的信息 。

具體代碼

在index頁面編寫如下代碼

// 需要緩存的組件
<keep-alive v-if="showView">
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
// 不需要緩存的組件
<router-view v-if="!$route.meta.keepAlive"></router-view>

緩存組件name為test-keep-alive的組件 ，這里的include為緩存，exclude為不緩存

// 將緩存name為test-keep-alive的組件
<keep-alive include="test-keep-alive">
  <component></component>
</keep-alive>
// 將緩存name為teat,teat2的組件
<keep-alive include="teat,teat2">
  <component></component>
</keep-alive>

在router文件配置如下代碼

// 需要緩存的組件
{
    path: '/Material',
    name: 'Material',
    aliasName: '物料信息',
    meta:{keepAlive: true}, // 是否緩存組件
    component: () => import('../components/Material/index.vue'),
},
{
    path: '/Unit',
    name: 'Unit',
    aliasName: '單位信息',
    component: () => import('../components/Unit/index.vue'),
}

以上就是“vue menu不刷新如何解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。