vue中keep-alive组件实现多级嵌套路由的缓存

目录
  • 现状(问题):
  • 探索方案:
  • 实现方式

现状(问题):

keep-alive 组件对第三级及以上级的路由页面缓存失效

探索方案:

方案1、直接将路由扁平化配置,都放在一级或二级路由中
方案2、再一层缓存组件用来过渡,并将其name配置到include中

实现方式

方案1不需要例子,按规则配置路由就行重点介绍方案2
因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现。

直接看原有代码(问题代码)

// src/layout/component/AppMain.vue
<template>
 <section class="app-main">
      <transition name="fade-transform" mode="out-in">
           <keep-alive :include="cachedViews">
                 <router-view :key="key" />
           </keep-alive>
      </transition>
 </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

我从后端那到数据后,根据树形结构做了处理(在store里写的,只展示出关键代码)

// 拿到数据先循环第一层将Layout付给组件
 generateRoutes({ commit }, routeList) {
    return new Promise(resolve => {
      routeList.forEach(items => {
        items.component = Layout
        // 如果有子菜单直接再循环赋值
        items.children = changeAsyncRoutes(items.children)
      })
      commit('SET_ROUTES', routeList)
      resolve(routeList)
    })
  }
function changeAsyncRoutes(routes) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (tmp.children && tmp.children.length !== 0) {
       // 若有子级 先创建router-view容器,再去递归(重点重点重点)
      tmp.component = {
           render: c => c('router-view')
      }
      tmp.children = changeAsyncRoutes(tmp.children)
    } else {
    // 没有子级菜单直接将component字符串解析成组件对象
      tmp.component = importMethod(tmp.component)
    }
    res.push(tmp)
  })
  return res
}

这种写法已经很完美了,可惜,我遇到了三级菜单不能缓存的问题
直接上解决问题的代码

1、新建MenuMain.vue组件如下

// src/layout/component/MenuMain.vue
// 提供多级菜单的容器
<template>
  <keep-alive :include="cachedViews">
    <router-view :key="key" />
  </keep-alive>
</template>

<script>
export default {
  name: 'MenuMain', // 必须命名
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

2、将此容器取代处理数据时render的 router-view 容器

// 引入组件
import MenuMain from '@/layout/components/MenuMain'

function changeAsyncRoutes(routes) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }

    if (tmp.children && tmp.children.length !== 0) {
    // 注意看着里
      tmp.component = MenuMain
      // {
      //   render: c => c('router-view')
      // }
      tmp.children = changeAsyncRoutes(tmp.children)
    } else {
      tmp.component = importMethod(tmp.component)
    }
    res.push(tmp)
  })
  return res
}

3、把store中的 cachedViews 数组中始终保存MenuMain组件的名称

cachedViews: ['MenuMain']

到此这篇关于vue中keep-alive组件实现多级嵌套路由的缓存的文章就介绍到这了,更多相关vue keep-alive多级嵌套路由缓存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3缓存页面keep-alive及路由统一处理详解

    目录 一.前言 二.使用 1.vue2和vue3的不同 2.页面某些数据不需要缓存 3.动态设置keepAlive属性 4.使用include,exclude配置需要缓存的组件 5.部分页面过来需要缓存,部分页面过来需要刷新 6.缓存只在一级路由生效 总结 一.前言 当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子 vue2和vue3的使用方式是不一

  • vue中keep-alive多级路由缓存问题

    目录 1.问题描述 2.原因分析 3.解决思路 4.处理过程 1.问题描述 对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时,正常切换两个便捷页签时是可以正常缓存的,但删除最后一个页签时,此时另一个页签页面此时已经不缓存了. 2.原因分析 keep-alive默认支持缓存是两级,对三级及以上层级的页面缓存失效,之前的处理方式为: 监听到路由变化后,将当前的路由的标识及父级标识一起存起来,当多个页面存在时,关闭其中一个页面,也会将本身及父级的标识一起删掉,此时数组中已无父级标识,其他同

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • vue中的router-view组件的使用教程

    开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用. 比如我们在一个导航组件中写了三个导航链接,他们的地址分别为:/food,/rating,/seller,点击每个导航链接都会跳转到不同的组件,我们通过<router-view></router-view> <template> <div class="navbar"> &l

  • Vue中利用better-scroll组件实现横向滚动功能

    About 最近在学习vue的过程中,仿照去哪儿网的移动端写了个小项目,旨在实践和巩固基础知识,但是今天发现去哪儿的首页上有一个组件用户体验较差,即一个横向列表使用浏览器的原生滚动实现,列表滚动起来较为生涩,很难受,于是乎决定由better-scroll重写这个组件. better-scroll介绍 better-scroll是黄轶大神(没错,我学长)写的基于i-scroll的一个滚动组件,项目地址:https://github.com/ustbhuangyi/better-scroll 一.滚

  • Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue中如何让子组件修改父组件数据

    一.关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1.常见的使用场景 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2.如果要一开始就执行 ... watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName;

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条 然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from '

  • Vue 中可以定义组件模版的几种方式

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升. 当然因为现在的系统越来越复杂庞大,所以开发与维护成本就变得必须要考虑的问题,因此滋生出了目前的三大前端框架 Vue.Angular.React. 那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别. 字符串形式 Vue 最简单直接的一种定义组件模版的方式,但是方式写起来很不友好,就像我们以前拼接 HTML 元素是一样的,很痛苦,所以我们并不常用 Vue.component("m

  • vue中使用element组件时事件想要传递其他参数的问题

    在使用element的上传组件时在一下几个钩子中传递其他参数 图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中传递一个自定义参数i,原本是这样写的: :on-success="handleSuccess(i)" //handleSuccess是一个方法 但是发现这样写取不到自身原来的参数,后来在网上找到了一个比较好的方法,如下: :on-success="(value)=> han

  • Vue中的异步组件函数实现代码

    具体代码如下所示: export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/view/live/live.vue') } ] }) 上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决 新建一个 loadable.vue

  • vue中使用elementUI组件手动上传图片功能

    Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法 代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim

随机推荐