欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

keep-alive不能緩存多層級(jí)路由菜單問(wèn)題解決

 更新時(shí)間:2020年03月10日 12:07:36   作者:一路從容  
這篇文章主要介紹了keep-alive不能緩存多層級(jí)路由菜單問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

這出現(xiàn)的原因是多級(jí)路由導(dǎo)致的,就是router-view嵌套 在層級(jí)不同的router-view中切換tag會(huì)出現(xiàn)緩存數(shù)據(jù)失效的問(wèn)題。目前keep-alive可以有效緩存一級(jí),二級(jí)的路由菜單,3級(jí)以上菜單并不能做到緩存,這里提供一個(gè)解決方案:

在cachedViews中手動(dòng)加上一級(jí)菜單和三級(jí)菜單之間,缺失的二級(jí)菜單的名字,這樣二級(jí)菜單下的組件就會(huì)緩存了

實(shí)列代碼如下:

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 => {
    // 刪除無(wú)用屬性
    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組件特殊處理
      //路徑為空時(shí)會(huì)因?yàn)閡ndefind報(bào)錯(cuò),給個(gè)默認(rèn)值來(lái)解決
      e.path = e.url||'nopath'
      if(e.url.split('/').length>2){
      //處理多層級(jí)路的時(shí)候給了一個(gè)空模板
        e.component = EmptyTemplate
      }else{
        e.component = Layout
      }
      e.icon='setting-fill'
      
    } else {
      e.icon='circle'
      e.component = _import(e.url)
      //路徑為空時(shí)會(huì)因?yàn)閡ndefind報(bào)錯(cuò),給個(gè)默認(rèn)值來(lái)解決
      e.path = e.url.split('/')[2]||'nopath'
    }
    // delete e.parentId
    delete e.url
    // if (e.redirect === '') {
    //  delete e.redirect
    // }
    
    if (e.icon !== '' && e.title !== '') { // 配置 菜單標(biāo)題 與 圖標(biāo)
      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//由于名字的存在導(dǎo)致named 錯(cuò)誤 刪掉
    if (e.children != null) {
      // 存在子路由就遞歸
      getRouter(e.children)
    }
    })
    return routerlists
  }
  const getRouters=getRouter(routerlists)
    // return asyncRouterMap
    
  return getRouters
}

空模板的代碼如下:

<template>
<div>
  <app-main/>
</div>
</template>
<script>
import { AppMain} from './components'
export default {
  name:'EmptyTemplate',
  components:{AppMain}
  
}
</script>

tagsViewd.js關(guān)鍵代碼,在cachedViews中加入空模板的name

const state = {
 visitedViews: [],
 cachedViews: ['EmptyTemplate']
}

到此這篇關(guān)于keep-alive不能緩存多層級(jí)路由菜單問(wèn)題解決的文章就介紹到這了,更多相關(guān)keep-alive不能多層緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue中this.$router.push參數(shù)獲取方法

    Vue中this.$router.push參數(shù)獲取方法

    下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • vue 如何使用vue-cropper裁剪圖片你知道嗎

    vue 如何使用vue-cropper裁剪圖片你知道嗎

    這篇文章主要為大家介紹了vue 使用vue-cropper裁剪圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-11-11
  • Vue利用axios發(fā)送請(qǐng)求并代理請(qǐng)求的實(shí)現(xiàn)代碼

    Vue利用axios發(fā)送請(qǐng)求并代理請(qǐng)求的實(shí)現(xiàn)代碼

    在Web開(kāi)發(fā)中,跨域問(wèn)題是一個(gè)常見(jiàn)難題,通常由瀏覽器的同源策略引起,通過(guò)簡(jiǎn)單配置vue.config.js文件,以及安裝axios依賴,即可實(shí)現(xiàn)前后端的無(wú)縫連接和數(shù)據(jù)交換,這種方法簡(jiǎn)便有效,對(duì)于處理跨域請(qǐng)求問(wèn)題非常實(shí)用
    2024-10-10
  • 對(duì)vue.js中this.$emit的深入理解

    對(duì)vue.js中this.$emit的深入理解

    下面小編就為大家分享一篇對(duì)vue.js中this.$emit的深入理解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • vue中使用sessionStorage記住密碼功能

    vue中使用sessionStorage記住密碼功能

    sessionStorage不是一種持久化的本地存儲(chǔ),僅僅是會(huì)話級(jí)別的存儲(chǔ)。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下
    2018-07-07
  • vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法

    vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法

    下面小編就為大家分享一篇vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • 在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總(推薦)

    在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總(推薦)

    dhtmlxGantt一個(gè)功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總,需要的朋友可以參考下
    2023-03-03
  • 淺談Vue-cli 命令行工具分析

    淺談Vue-cli 命令行工具分析

    本篇文章主要介紹了淺談Vue-cli 命令行工具分析,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11
  • vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法

    vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法

    今天小編就為大家分享一篇vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • electron最小化托盤(pán)設(shè)置

    electron最小化托盤(pán)設(shè)置

    本文主要介紹了electron最小化托盤(pán)設(shè)置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04

最新評(píng)論