詳解vue-template-admin三級路由無法緩存的解決方案

1. 為什么三級會緩存不了

創(chuàng)新互聯(lián)公司專注于銅官網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供銅官營銷型網(wǎng)站建設(shè)，銅官網(wǎng)站制作、銅官網(wǎng)頁設(shè)計(jì)、銅官網(wǎng)站官網(wǎng)定制、微信平臺小程序開發(fā)服務(wù)，打造銅官網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供銅官網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

在src/layout/AppMain組件:

keep-alive的組件依賴cachedViews,cachedViews是store中的一個(gè)狀態(tài)，cachedViews的邏輯在src/layout/TagView

當(dāng)路由變更時(shí)就會調(diào)用addViewTags,addViewTag會根據(jù)匹配的路由name屬性進(jìn)行緩存。而用到三級路由的時(shí)候，拿到name只能時(shí)第三級路由的name，二級路由組件的名字會丟失，keep-alive就不會進(jìn)行緩存。
知道原因之后，第一個(gè)想法就是把二級路由的name也加上去就好了。要實(shí)現(xiàn)這個(gè)也很簡單，只需要獲取到matched屬性就可以拿到匹配到的路由組件，把它加入到cachedViews數(shù)組就好了。但是有個(gè)問題就是，假設(shè)這里有個(gè)二級路由1-1，三級路由1-1-1，1-1-2，當(dāng)要關(guān)掉1-1-1組件時(shí)，你到底要不要把1-1給刪了，如果刪了，緩存能順利失效，但是如果你之前是打開了1-1-2，緩存的路由就會失效，因?yàn)樗且蕾?-1的。如果不刪的話，在側(cè)邊欄打開1-1-1的鏈接的時(shí)候，它又會重新復(fù)用回原本的組件。

2 把三級（概念上的）轉(zhuǎn)化為二級（真實(shí)）

在這里想來，如果1-1-1，1-1-2，其實(shí)只是因?yàn)榉衷谕悇e里，兩者如果沒有實(shí)際共享的數(shù)據(jù)，那可以考慮把1-1的路由組件關(guān)掉，在我實(shí)踐的項(xiàng)目就是如此，1-1-1和1-1-2只是同屬在二級菜單下，并沒有共享數(shù)據(jù)。但是生成菜單的時(shí)候是用router表的，那么生成菜單的用原本的，生成路由的時(shí)候用替換的。

下面是demo代碼：

將要被替換的路由加上noCompoent屬性。

function delteFakeParent(router,prefix) {
 var newRouter = { ...router }
 if(prefix){
 newRouter.path = prefix + '/' + router.path
 }
 if (!router.children) return newRouter
 var children = []
 if (router.noCompoent) {
 for (let i = 0; i < router.children.length; i++) {
  const item = delteFakeParent(router.children[i], newRouter.path)
  if (Array.isArray(item)) {
  item.forEach(el => {
   children.push(el)
  })
  }else{
  children.push(item)
  }
 }
 newRouter = children
 } else {
 for (let i = 0; i < router.children.length; i++) {
  const item = delteFakeParent(router.children[i])
  if (Array.isArray(item)) {
  item.forEach(el => {
   children.push(el)
  })
  }
 }
 newRouter.children = children
 }
 
 return newRouter
}

var backendManageRouter1 = {
 name: 'BackendManage',
 meta: {
 title: '后臺管理',
 icon: 'index-management'
 },
 children: [{
 path: 'user-manage',
 name: 'UserManage',
 noCompoent: true,
 meta: {
  title: '用戶管理',
  icon: 'rule-definition'
 },
 alwaysShow: true,
 children: [{
  path: 'user',
  name: 'User',
  meta: {
  title: '用戶管理',
  icon: 'quality-control'
  },
  noCompoent: true,
  children: [
  {
   path: 'a',
   name: 'ad',
   meta: {
   title: 'ad管理',
   icon: 'quality-control'
   },
  }
  ]
 }, {
  path: 'role',
  name: 'Role',
  meta: {
  title: '角色管理',
  icon: 'rule-task-monitor'
  }
 }]
 }]
}

delteFakeParent這個(gè)函數(shù)做的就是創(chuàng)建一個(gè)router副本，遍歷它的children,當(dāng)這個(gè)路由被標(biāo)記為noCompoent: true,就把它替換成它的children，回溯的過程中如果router是一個(gè)數(shù)組就代表這個(gè)router是被替換過，那么就遍歷它，把它每一項(xiàng)放到router.children里面，這樣就可以做到跟它其他children平級。
修改了這個(gè)之后要記著把真實(shí)router和菜單router同時(shí)暴露出去，菜單的項(xiàng)目是讀取store中的permission.js的routers,那么這里set-router一方面要處理真是router和菜單router，需要增加一個(gè)state

3. 使用vuex存儲數(shù)據(jù)

上面那個(gè)方案也只是針對二級路由組件不需要顯示出來，那么可以放到一級路由的children里面，但是如果是有需要的話，還是使用vuex來存儲數(shù)據(jù)比較好。

到此這篇關(guān)于vue-template-admin三級路由無法緩存的解決方案的文章就介紹到這了,更多相關(guān)vue-template-admin三級路由緩存內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！

本文名稱：詳解vue-template-admin三級路由無法緩存的解決方案
瀏覽路徑：http://muchs.cn/article18/gecggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、品牌網(wǎng)站制作、做網(wǎng)站、響應(yīng)式網(wǎng)站、企業(yè)建站、虛擬主機(jī)

廣告

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