keep-alive on 2nd level nested route

[tuandm]

Is it possible to make 2nd route cacheable?

const nestedRouter = {
  path: '/nested',
  component: Layout,
  redirect: '/nested/menu1/menu1-1',
  name: 'Nested',
  meta: {
    title: 'Nested Routes',
    icon: 'nested'
  },
  children: [
    {
      path: 'menu1',
      component: () => import('@/views/nested/menu1/index'), // Parent router-view
      name: 'Menu1',
      meta: { title: 'Menu 1' },
      redirect: '/nested/menu1/menu1-1',
      children: [
        {
          path: 'menu1-1',
          component: () => import('@/views/nested/menu1/menu1-1'),
          name: 'Menu1-1',
          meta: { title: 'Menu 1-1' }
        },
...

The Menu1-1 now uses import('@/views/nested/menu1/index') as layout which doesn't have <keep-alive>. How to make Menu1-1 cacheable?

[rainapple5293]

Have you solved this problem?

[kovalewvladimir]

The problem is solved by modifying mutations ADD_CACHED_VIEW and DEL_CACHED_VIEW.

[xieyuanbin1]

The problem is solved by modifying mutations ADD_CACHED_VIEW and DEL_CACHED_VIEW.

how？

[kovalewvladimir]

The problem is solved by modifying mutations ADD_CACHED_VIEW and DEL_CACHED_VIEW.

how？

This works for me:

  ADD_CACHED_VIEW: (state, view) => {
    // Добавил поддержку кэширования многоуровневых route
    // TODO: Работает с багами, нужно отладить или вернуть в исходное состояние!
    for (let i = 1; i < view.matched.length; i++) {
      if (!state.cachedViews.includes(view.matched[i].name)) {
        if (!view.matched[i].noCache) {
          state.cachedViews.push(view.matched[i].name)
        }
      }
    }
  },

DEL_CACHED_VIEW: (state, view) => {
    // Не удалять из кэша view, который ещё используется
    // используется для route вида: path: 'test/:id',
    if (state.visitedViews.some(v => v.name === view.name)) return

    // TODO: Нужно удалять родителя для многоуровневых route (навигации). см ADD_CACHED_VIEW
    // console.log('state.visitedViews', state.visitedViews)
    // console.log(state.visitedViews, view)
    // console.log(view.matched.pop().parent.name)
    // let parentViews = []
    // for (const visitedView of state.visitedViews) {
    //   if (!visitedView.matched) continue
    //   parentViews.push(view.matched.find(m => visitedView.matched.some(vvm => vvm.name === m.name)))
    // }
    // console.log(parentViews)
    // // console.log(view.matched.some(m => state.visitedViews.some(v => v.matched.some(vm => vm.name === m.name ))))

    const index = state.cachedViews.indexOf(view.name)
    index > -1 && state.cachedViews.splice(index, 1)

  },

[xieyuanbin1]

The problem is solved by modifying mutations ADD_CACHED_VIEW and DEL_CACHED_VIEW.

how？

This works for me:

  ADD_CACHED_VIEW: (state, view) => {
    // Добавил поддержку кэширования многоуровневых route
    // TODO: Работает с багами, нужно отладить или вернуть в исходное состояние!
    for (let i = 1; i < view.matched.length; i++) {
      if (!state.cachedViews.includes(view.matched[i].name)) {
        if (!view.matched[i].noCache) {
          state.cachedViews.push(view.matched[i].name)
        }
      }
    }
  },

DEL_CACHED_VIEW: (state, view) => {
    // Не удалять из кэша view, который ещё используется
    // используется для route вида: path: 'test/:id',
    if (state.visitedViews.some(v => v.name === view.name)) return

    // TODO: Нужно удалять родителя для многоуровневых route (навигации). см ADD_CACHED_VIEW
    // console.log('state.visitedViews', state.visitedViews)
    // console.log(state.visitedViews, view)
    // console.log(view.matched.pop().parent.name)
    // let parentViews = []
    // for (const visitedView of state.visitedViews) {
    //   if (!visitedView.matched) continue
    //   parentViews.push(view.matched.find(m => visitedView.matched.some(vvm => vvm.name === m.name)))
    // }
    // console.log(parentViews)
    // // console.log(view.matched.some(m => state.visitedViews.some(v => v.matched.some(vm => vm.name === m.name ))))

    const index = state.cachedViews.indexOf(view.name)
    index > -1 && state.cachedViews.splice(index, 1)

  },

thx. but it cant work for me😢