Vue的多级路由实现缓存处理

这篇具有很好参考价值的文章主要介绍了Vue的多级路由实现缓存处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

代码如下:
需要在路由前置守卫调用handleKeepAlive ()


/**
 * 兼容<layout>按需加载,实现多层路由缓存
 * @param to
 */
async function handleKeepAlive (to) {
	if (to.matched && to.matched.length > 2) {
		for (let i = 0; i < to.matched.length; i++) {
			const element = to.matched[i]
			if (element.components.default.name === 'layout') {
				to.matched.splice(i, 1)
				await handleKeepAlive(to)
			}
			// 如果没有按需加载完成则等待加载
			if (typeof element.components.default === 'function') {
				await element.components.default()
				await handleKeepAlive(to)
			}
		}
	}
}

注意:多级路由出口为位置增加name=‘layout’,就可以实现多级路由的缓存文章来源地址https://www.toymoban.com/news/detail-511066.html

到了这里,关于Vue的多级路由实现缓存处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring Boot多级缓存实现方案

    1.背景 缓存,就是让数据更接近使用者,让访问速度加快,从而提升系统性能。工作机制大概是先从缓存中加载数据,如果没有,再从慢速设备(eg:数据库)中加载数据并同步到缓存中。 所谓多级缓存,是指在整个系统架构的不同系统层面进行数据缓存,以提升访问速度。主要

    2024年02月14日
    浏览(35)
  • 前端登录退出:处理Token问题(获取、缓存、失效处理)以及代码实现

    Token是服务端生成的一串字符串,当用户第一次登陆成功后,服务器会生成一个token,并将其返回给客户端。 当用户再次向服务器请求数据时,只需要携带着token请求数据即可,无需再次登陆用户名和密码 目的 通过token做一层数据拦截,可以减少数据库请求次数,减缓服务器

    2024年02月02日
    浏览(35)
  • 微服务---分布式多级缓存集群实现方案(Caffeine+redis+nginx本地缓存+Canal数据同步)

    传统的缓存策略一般是请求到达Tomcat后,先查询Redis,如果未命中则查询数据库,如图: 存在下面的问题: •请求要经过Tomcat处理,Tomcat的性能成为整个系统的瓶颈 •Redis缓存失效时,会对数据库产生冲击 多级缓存就是充分利用请求处理的每个环节,分别添加缓存,减轻T

    2024年02月12日
    浏览(37)
  • vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由

    目标 整合vue-element-plus-admin前端框架,作为开发平台的前端。 准备工作 前端选用vue-element-plus-admin,地址 https://gitee.com/kailong110120130/vue-element-plus-admin。 首先clone项目,然后整合到开发平台中去。这是一个独立的前端的项目,而我将其放到后端项目根目录下,即建一个huayuan-w

    2023年04月22日
    浏览(38)
  • 思考(九十二):DBProxy实现多级存储和事务处理

    后端开发一块重要的内容就是如何处理数据。比如: 问题 说明 统一的访问界面 如游戏服只需要 Load、Save、Begin、Commit、Rollback 接口 多级存储来降低成本 如热数据在 Redis ;冷数据在 MySQL ;长时间非活跃,则归档 OSS 同个逻辑涉及多个数据更新 要么全部成功、要么全部失败

    2024年02月05日
    浏览(42)
  • vue3实现动态菜单和动态路由和刷新后白屏处理

    项目中,当每一个角色得到的界面不一致的时候,我们就不能使用静态菜单了,而是要从后端得到动态的菜单数据,然后动态的将菜单数据展示在界面上。 除了在界面展示,也还要将界面的路由动态添加,在路由动态添加之后,你可能会出现刷新界面,界面变白的情况,页面

    2024年02月06日
    浏览(51)
  • Vue路由缓存问题

    路由缓存问题的产生    VueRouter允许用户在页面中创建多个视图(多级路由),并根据路由参数来动态的切换视图。使用带参数的路由时,相同的组件实例将被重复使用。因为两个路由都渲染同一个组件,比起销毁再创建,复用则显得高效。不过,这也意味着组件的生命周期

    2024年02月22日
    浏览(38)
  • Vue缓存路由组件

    作用:让不展示的路由组件保持挂载,不被销毁

    2024年02月12日
    浏览(36)
  • 多级缓存架构(五)缓存同步

    通过本文章,可以完成多级缓存架构中的缓存同步。 1. mysql添加canal用户 连接在上一次 multiCache 项目中运行的 mysql 容器,创建 canal 用户。 2. mysql配置文件 在 docker/mysql/conf/my.cnf 添加如下配置 3. canal配置文件 添加 canal 服务块到 docker-compose.yml ,如下 任意启动一个 canal-server 容

    2024年01月16日
    浏览(54)
  • vue3 路由缓存问题

    目录 解决问题的思路: 解决问题的方案: 1、给roter-view添加key(破坏复用机制,强制销毁重建) 2、使用beforeRouteUpdate导航钩子 3、使用watch监听路由 vue3路由缓存:当用户从/users/johnny导航到/users/jolyne时,相同的组件实例被重复使用。由于两个路由都渲染相同的组件,比起销

    2024年02月12日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包