這出現的原因是多級路由導致的，就是router-view嵌套 在層級不同的router-view中切換tag會出現緩存數據失效的問題。目前keep-alive可以有效緩存一級，二級的路由菜單，3級以上菜單并不能做到緩存，這里提供一個解決方案：

站在用戶的角度思考問題，與客戶深入溝通，找到京山網站設計與京山網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：成都網站建設、網站設計、企業官網、英文網站、手機端網站、網站推廣、域名與空間、虛擬空間、企業郵箱。業務覆蓋京山地區。

在cachedViews中手動加上一級菜單和三級菜單之間，缺失的二級菜單的名字，這樣二級菜單下的組件就會緩存了

實列代碼如下：

const _import = require('@/router/_import_prodection');//獲取組件的方法
import {tree} from '@/utils/treeDate'
import Layout from '@/views/layout'
import EmptyTemplate from '@/views/layout/EmptyTemplate'

export function filterAsyncRouter(routerlist) {
  const routerlists=tree(routerlist )
  //獲取路由信息
  function getRouter(routerlists){
    routerlists.forEach(e => {
    // 刪除無用屬性
    delete e.catalogCode
    delete e.catalogOrder
    delete e.endpoints
    delete e.fullOrder
    
    // delete e.permName
    // delete e.id
    // delete e.parentId
    e.name=e.catalogName
    
    if (e.parentId === 0||e.children) {//Layout組件特殊處理
      //路徑為空時會因為undefind報錯，給個默認值來解決
      e.path = e.url||'nopath'
      if(e.url.split('/').length>2){
      //處理多層級路的時候給了一個空模板
        e.component = EmptyTemplate
      }else{
        e.component = Layout
      }
      e.icon='setting-fill'
      
    } else {
      e.icon='circle'
      e.component = _import(e.url)
      //路徑為空時會因為undefind報錯，給個默認值來解決
      e.path = e.url.split('/')[2]||'nopath'
    }
    // delete e.parentId
    delete e.url
    // if (e.redirect === '') {
    //  delete e.redirect
    // }
    
    if (e.icon !== '' && e.title !== '') { // 配置 菜單標題 與 圖標
      e.meta = {
        // title: e.catalogName 中文名稱
         // catalogEngName 英文名稱
        title: e.catalogEngName,
        titleZh:e.catalogName,
        icon: e.icon
      }
    }
    delete e.catalogName
    delete e.icon
    delete e.title
    // delete e.name//由于名字的存在導致named 錯誤 刪掉
    if (e.children != null) {
      // 存在子路由就遞歸
      getRouter(e.children)
    }
    })
    return routerlists
  }
  const getRouters=getRouter(routerlists)
    // return asyncRouterMap
    
  return getRouters
}

新聞標題：keep-alive不能緩存多層級路由菜單問題解決-創新互聯
本文地址：http://www.yijiale78.com/article10/dpjjgo.html

成都網站建設公司_創新互聯，為您提供網站設計公司、網站改版、網站排名、企業網站制作、動態網站、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯