vue menu不刷新怎麼辦

vue menu不刷新的解決方案：1、在index頁寫「」； 2.將快取name設定為「test-keep-alive」；3、在router檔案配置「{path: '/Material',name: 'Material'...}」即可。

本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。

vue menu不刷新怎麼辦？

vue 實作元件切換tab（選單）頁面不刷新頁面

vue 實作元件切換tab(選單)頁不刷新頁面（keep alive）

是Vue的內建元件，能在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOM。

官網解釋

包裹動態元件時，會快取不活動的元件實例，而不是銷毀它們。和 相似， 是抽像元件：它本身不會渲染一個 DOM 元素，也不會出現在父元件鏈中。當元件在 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 樹內的所有巢狀元件中觸發。主要用於保留元件狀態或避免重新渲染。

應用程式場景

例如在做有切換元件的功能的系統時，一般都是在index頁面裡放置標籤，再加上router檔案設定的父子元件關係以及路由跳轉，實現元件渲染頁面。但是這樣的效果是每點擊一次元件，就會重新渲染一次也面，頁面上的資料就不會被保留下來。因此，使用標籤包裹著標籤就可以實現把不活動的組件緩存下來，返回後仍有原來的信息 。

具體程式碼

在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.js影片教學》

以上是vue menu不刷新怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！