当前位置：首页 > news >正文

Vue 使用 vue-router 时，多级嵌套路由缓存问题处理

news 来源：原创 2025/8/26 22:20:26

Vue 使用 vue-router 时，多级嵌套路由缓存问题处理

对于三级菜单（或多级嵌套路由），vue 都是通过 keep-alive 组件来实现路由组件的缓存。

有时候三级或者多级路由时，会出现失效情况。以下是三级菜单缓存的例子。

最后会有惊喜！

1.配置嵌套路由

在 vue-router 中，嵌套路由需要正确配置 children 属性，并且每个路由组件都需要有唯一的 name，很重要。很重要。很重要。。

const routes = [{path: '/',component: Layout, // 布局组件children: [{path: '/menu1/path/',component: Menu1, // 一级菜单children: [{path: '/submenu1/path',component: SubMenu1, // 二级菜单children: [{path: 'item1',component: Item1, // 三级菜单name: 'Item1', // 确保每个组件有唯一的 namemeta: {noCache: false,   //自定义参数，是否缓存}},{path: 'item2',component: Item2,name: 'Item2',meta: {noCache: false,}},],},],},],},
];

2. 在嵌套路由中使用 router-view

在每一级菜单的组件中，都需要使用 router-view 来渲染子路由，记住是每一级

Menu1.vue

<template><div><h2>Menu 1</h2><keep-alive><router-view></router-view> <!-- 渲染二级菜单 --></keep-alive></div>
</template>

SubMenu1

<template><div><h3>SubMenu 1</h3><keep-alive><router-view></router-view> <!-- 渲染三级菜单 --></keep-alive></div>
</template>

3. 使用 keep-alive 缓存嵌套路由

在顶级组件（如 Layout.vue）中，用包裹，确保所有嵌套路由组件都能被缓存。
如果只想缓存特定的嵌套路由组件，可以通过 include 或 exclude 属性来实现。

Layout.vue

<template><div><nav><!-- 菜单导航 --><router-link to="/menu1/submenu1/item1">Item 1</router-link><router-link to="/menu1/submenu1/item2">Item 2</router-link></nav><!-- 使用 keep-alive 缓存所有嵌套路由 --><keep-alive :include="cachedViews"  :exclude="notCacheName"><router-view></router-view></keep-alive></div>
</template><script>
export default {name: "clientManager",computed: {cachedViews() {return [...this.$store.state.tagsView.cachedViews];},key() {return this.$route.path;},notCacheName() {return [this.$route.meta && this.$route.meta.noCache ? this.$route.name : "",];},},
};
</script>

此处有疑问点：

我查到的文档，基本上都是说在 顶级组件 Layout.vue 里面配置 keep-alive即可，下级的不用配置。

但是经过我测试，发现每一级都要配置 keep-alive，请看第二步。不配置的话，缓存就是不起作用。不知道为啥？

我是配置了每一级的，然后就可以了。此次请大家帮我解一下疑惑，万分感谢！

4. 最后的页面

<template><div><h4>Item 1</h4><p>This is Item 1.</p></div>
</template><script>
export default {name: 'Item1',activated() {console.log('Item1 被激活');},deactivated() {console.log('Item1 被停用');},
};
</script>

菜单缓存失败的原因

路由配置不正确，导致组件被重复渲染。
组件没有唯一的 name。
嵌套路由的没有正确渲染
确认页面的 name 是否和路由配置定义页面的 name 是否相同，不同肯定失败。

最易出错的是最后一点，请仔细检查。

Vue 使用 vue-router 时，多级嵌套路由缓存问题处理

Vue 使用 vue-router 时，多级嵌套路由缓存问题处理对于三级菜单（或多级嵌套路由），vue 都是通过 keep-alive 组件来实现路由组件的缓存。有时候三级或者多级路由时，会出现失效情况。以下是三级菜单缓存的例子。最…...

编程日记 2025/8/26 22:20:26

《实战AI智能体》Deepseek可以做什么？自然语言理解与分析

在人工智能技术快速迭代的今天，Deepseek凭借其先进的自然语言处理能力，正在重塑人机交互的边界。本文将从技术实现维度，深入解析该平台在自然语言理解、知识推理与文本分类三大核心领域的技术突破与应用实践。一、深度语义理解引擎 Deepseek构建了多层级的语义解析架构，实…...

编程日记 2025/8/26 22:14:01

虚拟主机认证功能

一.认证功能类型： 1.基于客户端地址的认证 2.基于用户的认证 1.基于客户端地址的认证 nginx是一款模块化软件，功能都是基于模块实现的。如上图所示，访问认证是使用的这个access_module模块。这个模块也给我们提供了一些指令&#xf…...

编程日记 2025/8/22 1:50:57

BGP协议深度解析：从背景到术语的全面梳理

引言在复杂的网络架构中，不同自治系统（AS）之间的路由交互至关重要。BGP（Border Gateway Protocol，边界网关协议）作为自治系统间的动态路由协议，承担着跨 AS 路由传递的关键任务。本文将深入探讨…...

编程日记 2025/8/22 1:15:35

初步认识线程

概念一个线程就是一个 "执行流",每一个线程之间都可以按照顺序执行自己的代码,多个线程之间可以 "同步" 执行多份代码比如说,原本一个人做的事情,现在交给三个人一起做,那么这三个人就是线程使用原因那么为什么要有线程呢?我们直接使用进程不可以…...

编程日记 2025/8/21 21:39:05

【从零开始学习计算机科学】数字逻辑（一）绪论

【从零开始学习计算机科学】数字逻辑（一）绪论概论信息与数字数字系统中常用的概念数字信号的描述方法概论从数字（集成）电路的出现到计算机到网络到今天的移动互联网，数字电路是所有现代信息技术的基础。那么数字电路的基础又是什么呢？就是数字逻辑。所有数字系统都是基…...

编程日记 2025/8/24 19:44:24

Tomcat与Jetty的选择

Tomcat与Jetty的对比分析，分核心区别、性能表现及选型建议三部分： 一、核心区别对比对比维度TomcatJetty架构设计多层级容器结构（Server→Service→Engine等），复杂度高基于Handler链的轻量级设计，扩展性强…...

编程日记 2025/8/26 22:16:31

用AI学编程2——python学习1

一个py文件，学会所有python所有语法和特性，给出注释，给出这样的文件 Python 学习整合文件 """ Python 学习整合文件包含 Python 的基础语法、数据结构、函数定义、面向对象编程、异常处理、文件操作、高级特性等内容每个部…...

编程日记 2025/8/25 3:36:03

【教程】宝塔提示请不要将网站根目录设置到以下关键目录中

【教程】宝塔提示请不要将网站根目录设置到以下关键目录中【教程】宝塔提示请不要将网站根目录设置到以下关键目录中更换目录解决问题先在宝塔下载一个【教程】宝塔提示请不要将网站根目录设置到以下关键目录中更换目录解决问题_起尔网【教程】宝塔提示请不要将网站根目录设…...

编程日记 2025/8/26 12:35:53

html常用的文本标签以及属性

HTML标签 HTML通过一系列的标签（也成为元素），来定义文本，图像，链接等等，HTML标签是由尖括号包围的关键字。标签通常成对出现，包括开始标签和结束标签（也成为双标签）&a…...

编程日记 2025/8/24 12:40:34

城市霓虹灯夜景拍照后期Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色教程在城市霓虹灯夜景拍摄中，由于现场光线复杂等因素，照片可能无法完全呈现出当时的视觉感受。通过 Lr 调色，可以弥补拍摄时的不足。例如，运用基本调整面板中的曝光、对比度、阴影等工具，可以处理出画面的整体明暗…...

编程日记 2025/8/24 21:50:02

c#面试题整理

1.如何保持数据库的完整性，一致性最好的方法：数据库约束（check,unique,主键，外键，默认，非空） 其次是：用触发器最后：才是自己些业务逻辑，这个效率低 2.事…...

编程日记 2025/8/22 15:21:07

数据库基础以及基本建库建表的简单操作

文章目录一、数据库是啥1.1、数据库的概念1.1、关系型数据库、非关系型数据库1.1、数据库服务器，数据库与表之间的关系二、为啥要使用数据库2.1：传统数据文件存储2.2：数据库存储数据2.3、结论三、使用数据库了会咋样四、应该咋用数据库&am…...

编程日记 2025/8/24 15:52:12

基于spring boot使用@Sl4j的日志功能，注解引入后爆红未生效

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录问题描述问题分析解决方案 📃文章…...

编程日记 2025/8/22 1:50:59

《深度剖析架构蒸馏与逻辑蒸馏：探寻知识迁移的差异化路径》

在人工智能模型优化的前沿领域，架构蒸馏与逻辑蒸馏作为知识蒸馏的关键分支，正引领着模型小型化与高效化的变革浪潮。随着深度学习模型规模与复杂度的不断攀升，如何在资源受限的情况下，实现模型性能的最大化，成为了学术…...

编程日记 2025/8/23 17:03:28

使用OpenCV来获取视频的帧率

在OpenCV中，获取视频的帧率（FPS, Frames Per Second）是一个常见的操作，尤其是在处理视频流或进行视频分析时。帧率表示每秒钟视频中的帧数，这个参数对于视频播放速度和时间计算非常重要。以下是如何使用OpenCV来获取…...

编程日记 2025/8/25 22:47:21

计算机视觉｜3D卷积网络VoxelNet：点云检测的革新力量

一、引言在科技快速发展的背景下，3D 目标检测技术在自动驾驶和机器人领域中具有重要作用。在自动驾驶领域，车辆需实时、准确感知周围环境中的目标物体，如行人、车辆、交通标志和障碍物等。只有精确检测这些目标的位置、姿态和类别&#x…...

编程日记 2025/8/22 1:53:09

vue-cli3+vue2+elementUI+avue升级到vite+vue3+elementPlus+avue总结

上一个新公司接手了一个vue-cli3vue2vue-router3.0elementUI2.15avue2.6的后台管理项目，因为vue2在2023年底已经不更新维护了，elementUI也只支持到vue2，然后总结了一下vue3的优势，最后批准升级成为了vitevue3vue-router4.5element…...

编程日记 2025/8/20 21:53:32

Jmeter进行http接口测试详解

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快本文主要针对http接口进行测试，使用 jmeter工具实现。 Jmeter工具设计之初是用于做性能测试的，它在实现对各种接口的调用方面已经做的比较…...

编程日记 2025/8/22 1:07:47

大模型AI平台DeepSeek 眼中的SQL2API平台：QuickAPI、dbapi 和 Magic API 介绍与对比

目录 1 QuickAPI 介绍 2 dbapi 介绍 3 Magic API 介绍 4 简单对比 5 总结统一数据服务平台是一种低代码的方式，实现一般是通过SQL能直接生成数据API，同时能对产生的数据API进行全生命周期的管理，典型的SQL2API的实现模式。以下是针对…...

编程日记 2025/8/16 11:31:16

靶场之路-VulnHub-DC-6 nmap提权、kali爆破、shell反连

靶场之路-VulnHub-DC-6 一、信息收集 1、扫描靶机ip 2、指纹扫描这里扫的我有点懵，这里只有两个端口，感觉是要扫扫目录了 nmap -sS -sV 192.168.122.128 PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 7.4p1 Debian 10deb9u6 (protoc…...

编程日记 2025/8/26 1:37:48

nginx服务器实现上传文件功能_使用nginx-upload-module模块

目录 conf文件内容如下html文件内容如下上传文件功能展示 conf文件内容如下 #user nobody; worker_processes 1;error_log /usr/logs/error.log; #error_log /usr/logs/error.log notice; #error_log /usr/logs/error.log info;#pid /usr/logs/nginx.pid;even…...

编程日记 2025/8/21 22:44:46

32.C++二叉树进阶1（二叉搜索树）

⭐上篇文章：31.C多态4（静态多态，动态多态，虚函数表的存储位置）-CSDN博客 ⭐本篇代码：c学习/18.二叉树进阶-二叉搜索树橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) ⭐标⭐是比较重要的部分…...

编程日记 2025/8/16 10:14:39

RV1126+FFMPEG多路码流监控项目

一.项目介绍： 本项目采用的是易百纳RV1126开发板和CMOS摄像头，使用的推流框架是FFMPEG开源项目。这个项目的工作流程如下(如上图)：通过采集摄像头的VI模块，再通过硬件编码VENC模块进行H264/H265的编码压缩，并把压缩后的…...

编程日记 2025/8/23 12:23:47

doris: SQL Server

Doris JDBC Catalog 支持通过标准 JDBC 接口连接 SQL Server 数据库。本文档介绍如何配置 SQL Server 数据库连接。使用须知要连接到 SQL Server 数据库，您需要 SQL Server 2012 或更高版本，或 Azure SQL 数据库。 SQL Server 数据库的 JDBC 驱动…...

编程日记 2025/8/21 16:13:02

valgrind 检测多线程 bug，检测并发 bug concurrent bug parallel bug

valgrind --toolhelgrind ./your_program 如果检测的对象是大型程序，可以设定仅在某些函数中开启 valgrind 的检测： Valgrind 提供了一些客户请求（client requests），可以在代码中插入特定的宏来控制 Valgrind 的行为。…...

编程日记 2025/8/21 12:14:29

查看k8s集群的资源使用情况

查看Kubernetes（k8s）集群的资源使用情况有多种方法，以下是一些常见的方式： 使用kubectl命令行工具查看节点资源使用情况 kubectl top nodes命令可以显示集群中各个节点的CPU和内存使用情况。例如： NAME …...

编程日记 2025/8/25 0:51:23

在 k8s中查看最大 CPU 和内存的极限

在 Kubernetes（k8s）中，你可以从不同层面查看最大 CPU 和内存的极限，下面为你详细介绍从节点和集群层面查看的方法。查看节点的 CPU 和内存极限节点的 CPU 和内存极限是指单个节点上可分配的最大资源量，可通过以下几…...

编程日记 2025/8/20 11:06:20

IDC权威认证！永洪科技入选 IDC「GBI图谱」，点亮生成式 BI 价值灯塔

大数据市场正在稳步前进，生成式AI已成为厂商服务的重点方向，其发展离不开数据底座建设和数据工程管理，反过来AI也会帮助开发运维人员、业务人员和管理层更好地使用、查询数据。IDC调研数据显示，在生成式AI的驱动下，未来…...

编程日记 2025/8/20 2:34:52

HarmonyOS 应用程序包结构 (编译态)

不同类型的Module编译后会生成对应的HAP、HAR、HSP等文件，开发态视图与编译态视图的对照关系如下： 从开发态到编译态，Module中的文件会发生如下变更： ets目录：ArkTS源码编译生成.abc文件。resources目录：A…...

编程日记 2025/8/20 23:37:14

C# 程序结构

C#的程序结构大体可以分为： 命名空间、类名、Main方法、标识符及关键字语句注释 C# 文件的后缀为 .cs 以下创建一个HelloWorld的类，可以看一下 using System; namespace HelloWorldApplication //命名空间 {class HelloWorld //类名{static void …...

编程日记 2025/8/23 1:54:12

LLM 学习（二完结 Multi-Head Attention、Encoder、Decoder）

文章目录 LLM 学习（二完结 Multi-Head Attention、Encoder、Decoder）Self-Attention （自注意力机制）结构多头注意力 EncoderAdd & Norm 层Feed Forward 层 EncoderDecoder的第一个Multi-Head AttentionMasked 操作Teacher Fo…...

编程日记 2025/8/23 11:50:45

GET3D：从图像中学习的高质量3D纹理形状的生成模型

【摘要】本文提出了GET3D，这是一种新的生成模型，能够生成具有任意拓扑结构的高质量3D纹理网格，可以直接被3D渲染引擎使用并在下游应用中立即使用。现有的3D生成模型要么缺乏几何细节，要么生成的网格拓扑受限，通常不支持纹理，或者在生成过程中使用神经渲染器，使得它们在…...

编程日记 2025/8/24 5:19:47

JmeterHttp请求头管理出现Unsupported Media Type问题解决

JmeterHttp请求头管理出现Unsupported Media Type问题解决大多数的app与pc端压测的时候都会出现这种情况当我们在jemter测试当中当中遇见Unsupported Media Type，有一种可能就是我们请求的网页的content-Type的类型与我们测试的时候的类型不一致解决方法可以添…...

编程日记 2025/8/16 12:20:48

Python 性能优化：从入门到精通的实用指南

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/8/16 12:18:26

Vue23Web 基礎性拉滿的面試題(2025版)還沒更新完...

Vue2&3 基礎性1. 關於Vue2和Vue3生命週期的差別2. Vue2&3組件之間傳參不同點Vue2 傳遞與接收Vue3 傳遞與接收 (使用script setup語法糖)Vue3 傳遞與接收 (不使用script setup語法糖) 3. Vue2&3 keep-alive 組件Vue2 keep-aliveVue3 keep-alive 進階性爲什麽POST請求…...

编程日记 2025/8/22 20:58:50

Python基于Django的医用耗材网上申领系统【附源码、文档说明】

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/8/24 5:24:09

STM32使用无源蜂鸣器

1.1 介绍： 有源蜂鸣器：内部自带振荡源，将正负极接上直流电压即可持续发声，频率固定无源蜂鸣器：内部不带振荡源，需要控制器提供振荡脉冲才可发声，调整提供振荡脉冲的频率，可发出不同…...

编程日记 2025/8/21 17:52:53

9.1go结构体

Go不是完全面向对象的，没有类的概念，所以结构体应该承担了更多的责任。结构体定义使用 type 和 struct 关键字定义： type Person struct { Name string Age int } 字段可以是任意类型，包括其他结构体或指针。字段名以大写…...

编程日记 2025/8/24 18:19:13

Ubuntu20.04本地配置IsaacLab 4.2.0的G1训练环境（一）

Ubuntu20.04本地配置IsaacLab的G1训练环境（一） 配置Omniverse环境配置IsaacSim配置IsaacLab 写在前面，如果Ubuntu剩余空间低于60G，则空间不足，除非你不需要资产包。但资产包中却包含了G1模型、Go2模型等机器人模型和代…...

编程日记 2025/8/23 20:42:49

全星FMEA软件：汽车电子行业研发管理高效之选

全星FMEA软件：汽车电子行业研发管理高效之选在汽车电子行业，FMEA（失效模式与影响分析）是确保产品质量和安全的关键工具。然而，传统的FMEA分析过程往往繁琐复杂，耗费大量时间和精力。全星FMEA软件应运而生…...

编程日记 2025/8/17 23:14:59

AGI 之【Dify】之使用 Docker 在 Windows 端本地部署 Dify 大语言模型（LLM）应用开发平台

AGI 之【Dify】之使用 Docker 在 Windows 端本地部署 Dify 大语言模型（LLM）应用开发平台目录 AGI 之【Dify】之使用 Docker 在 Windows 端本地部署 Dify 大语言模型（LLM）应用开发平台一、简单介绍二、Docker 下载安…...

编程日记 2025/8/24 2:11:22

OpenCV计算摄影学（18)平滑图像中的纹理区域同时保留边缘信息函数textureFlattening()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::textureFlattening 是 OpenCV 中用于图像处理的一个函数，旨在平滑图像中的纹理区域，同时保留边缘信息。该技术特别适…...

编程日记 2025/8/26 7:50:30

RLock类详细介绍、应用场景和示例代码

概述 org.redisson.api.RLock 是 Redisson 提供的分布式可重入锁（类似 ReentrantLock），基于 Redis 实现，常用于分布式环境下的并发控制。 1. RLock 详解 🔹 特点基于 Redis 实现，支持集群环境。可…...

编程日记 2025/8/25 9:27:28

【HeadFirst系列之HeadFirst设计模式】第16天之生成器模式（Builder Pattern）：让对象构建更优雅！

🚀 生成器模式（Builder Pattern）：让对象构建更优雅！ “遇到复杂对象构建？试试生成器模式！” 在日常开发中，我们经常会遇到创建对象属性过多、构造方法过长、可选参数混乱的问题。这…...

编程日记 2025/8/21 11:13:34

Browser Use+DeepSeek的使用教程

browser-use webui 主要功能提供了全新的网页界面，简单好用，方便操作。支持更多大语言模型，比如 Gemini、OpenAI、Azure 等，还有最近爆火的国产大模型 DeepSeek，未来还会加更多。支持用自己的浏览器，不用…...

编程日记 2025/8/25 3:41:55

“此电脑”中删除WPS云盘方法（百度网盘通用）

📣此方法适用于卸载WPS云盘后，WPS云盘图标依然在此电脑中显示的问题。原理：通过注册来进行删除步骤： WIN键R,打开运行窗口，输入regedit命令，来打开【注册表编辑器】； 从左侧，依…...

编程日记 2025/8/22 13:49:42

1. 树莓派上配置机器人环境（具身智能机器人套件）

1. 安装树莓派系统镜像下载地址（windows/Mac/Ubuntu)，安装Pi5. 2. 环境配置（登录Pi系统） 2.1 启用 SSH From the Preferences menu, launch Raspberry Pi Configuration. Navigate to the Interfaces tab. Select Enable…...

编程日记 2025/8/20 22:52:39

正则表达式（2）匹配规则

正则表达式的匹配规则定义了如何识别字符串中的特定模式。这些规则包括字符类匹配、元字符匹配、数量词、字符转义和分组。字符类匹配字符类匹配允许你指定一个字符集合，并匹配该集合中的任意单个字符。这是通过方括号 [] 来实现的。简单字符类：[abc…...

编程日记 2025/8/24 20:37:25

Golang实践录：go发布版本信息收集

go发布版本信息收集。背景本文从官方、网络资料收罗有关go的发布历史概况。主要目的是能快速了解golang不同版本的变更。鉴于官方资料为英文，为方便阅读，使用工具翻译成中文，重要特性参考其它资料补充/修改。由于发布版本内容较多&#xf…...

编程日记 2025/8/23 1:27:44

Vue 使用 vue-router 时，多级嵌套路由缓存问题处理

1.配置嵌套路由

2. 在嵌套路由中使用 router-view

3. 使用 keep-alive 缓存嵌套路由

4. 最后的页面

最易出错的是最后一点，请仔细检查。

相关文章：