vue 解决:点击左侧相同菜单,右侧页面不重新加载的问题

1、问题描述:

其一、需求为:
无论是通过路由组件形成的平台管理系统,还是通过文件配置形成的平台管理系统,都存在通过切换左侧的导航栏而使右侧的页面切换的业务需求;

其二、问题描述为:
A、步骤一:
切换左侧不同的导航栏,右侧页面能展示对应的 .vue 文件,且加载都没有问题(即:页面可以加载,对应的接口也可以加载);

B、步骤二:
但要在左侧点击相同页面的导航栏(即:已经展示该页面,再点击左侧相同菜单,右侧页面不再重新加载,当然也没进行刷新操作);

C、步骤三:
想要的效果为:无论点击哪个导航栏菜单,右侧页面都想要被重新加载;

2、问题分析:

猜测重复点击相同页面的导航栏时,页面应该没有销毁和重新加载;

3、问题解决:

其一、点击导航菜单操作过程(即:现存的问题):
A、点击左侧导航栏执行 clickTarget() 函数:

在这里插入图片描述

B、子组件暴露 navigate() 方法及传 lvl3.target 参数:

在这里插入图片描述

C、父组件引入并触发 navigate() 方法:

在这里插入图片描述

// 并通过 curtarget 的值,在 KnsContent 组件中加载;

在这里插入图片描述

D、通过不同的 curtarget 来加载不同且独立的 vue 组件:

在这里插入图片描述

E、存在的问题:

重复点击左侧导航栏的菜单(即:点击左侧导航相同菜单),右侧页面不重新加载,但左侧切换不同的菜单,右侧页面加载就没有问题;

其二、修改的操作为(即:解决问题):
A、父组件引入并触发 navigate() 方法中,添加销毁和重加载操作:

// 当然,此时的 isActived 是已经定义过的;

在这里插入图片描述

在这里插入图片描述

B、通过不同的 curtarget 来加载不同且独立的 vue 组件中,添加 v-if 的操作:

// v-if 可以来控制组件的加载与销毁(即:v-iftrue 时,页面(即:.vue 组件)就加载;而为 false 时,页面(即:.vue 组件)就销毁;)

在这里插入图片描述

C、此时需求就能满足:

修改上述位置代码后,就解决了:点击左侧相同菜单,右侧页面不重新加载的问题;

其三、解决过程剖析:
A、设置 isActived 的初始值为: true

因为项目刚运行打开时,右侧的页面要加载对应的 .vue 组件;
而若此时 isActived 的初始值为 false,那么右侧页面对应的 .vue 组件将会是空的;

B、nextTick() 方法的剖析:

在触发 navigate() 方法,执行语句:isActived.value = false 后, KnsContent 组件就会执行 v-if 的销毁动作并渲染和更新 DOM,而 nextTick() 方法就是要拿到最新的 DOM 后,立即执行 isActived.value = true 操作,然后 KnsContent 组件就再次被加载(即: v-iftrue 的操作)并再次更新 DOM

C、达到目的效果:

nextTick() 方法的使用下,就是实现了:点击左侧相同菜单,右侧页面也重新加载;

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/709492.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis很慢,如何排查及解决?

性能分析工具: 使用Redis自带的命令或者第三方工具进行性能分析,比如INFO命令、MONITOR命令、SLOWLOG命令等。使用外部性能分析工具,如Redis的慢查询日志、Redis的监控工具、操作系统的性能分析工具(例如top、htop、sar等&#xf…

基于RISC-V架构的通信DSP的设计以及在5G RedCap基带中的应用(五)-基于RISC-V的RedCap DSP在5G基带中的应用

4 基于RISC-V的RedCap DSP在5G基带中的应用 4.1 基带处理器的关键任务和性能需求 基带处理器是移动通信设备中的关键部件,负责处理无线信号,包括信号的接收、发送和处理。在5G通信系统中,基带处理器的关键任务和性能需求包括以下几个方面&a…

【Linux C | 网络编程】gethostbyname 函数详解及C语言例子

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

常用网络协议配置步骤摘要

目录 一、配置IP地址二、配置静态路由三、配置动态路由(OSPF)四、配置Telnet五、配置SSH六、配置DHCP七、配置ACL八、配置NAT(Easy_IP)九、配置NAT(Server NAT) 一、配置IP地址 进入到接口 添加IP地址 二…

jmeter实战

全局设置 Add->Config Element->User Defined Variables 用户自定义变量name->value格式后面通过 \${xxx}方式引用变量Add -> Pre Processor -> BeanShell PreProcessor 通过代码形式或者shell脚本形式在请求前定义变量shell脚本文件 或者 编写Java 脚本定义变…

就业班 2401--2.29 Linux Day8--存储管理2(LVM)+swap+磁盘阵列raid

!!!!!!小伙伴们一定要看到最后,有彩蛋呢^--^ 一、存储管理Ⅱ 逻辑卷LVM (Logical Volume Manager(逻辑卷管理)的简写) LVM管理 lvm概念&#xf…

代理IP如何帮助领英账号预防封号限制?

LinkedIn是跨境外贸必备的拓客工具,世界各地的许多专业人士都使用领英来作为发布和共享内容的主要工具,这使得它成为跨境出海必备的渠道工具。 但是不少做外贸的朋友都知道,领英账号很容易遭遇限制封禁,但如果善用工具&#xff0…

单点登录的三种方式

前言 在B/S系统中,登录功能通常都是基于Cookie 来实现的。当用户登录成功后,一般会将登录状态记录到Session中,或者是给用户签发一个 Token,无论哪一种方式,都需要在客户端保存一些信息(Session ID或Token)&#xff0…

redis-RedisTemplate.opsForGeo 的geo地理位置及实现附近的人的功能

redis内部使用的是 zset 数据结构存储,如下 import cn.huawei.VideoApplication; import cn.huawei.domain.Jingqu; import cn.huawei.service.JingquService; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired…

什么是存储过程和函数?它们与常规SQL查询有什么不同?描述一下MySQL的事务管理。

什么是存储过程和函数?它们与常规SQL查询有什么不同? 存储过程和函数是MySQL数据库中预编译的SQL代码块,它们可以被多次调用并执行特定的任务。它们与常规的SQL查询有以下几个主要的不同点: 预编译和执行:存储过程和函…

leetcode-62. 不同路径

题目描述 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。 问总共有多少条不同的路径&#xff…

Tkinter.Text控件中,文本存在某个关键字的将被高亮显示(标记颜色+字体加粗)

在Tkinter的Text控件中,要标记某个关键字并改变其颜色,你可以使用tag_add方法来给包含关键字的文本添加标签,然后使用tag_config方法来配置该标签的显示样式,包括前景色(字体颜色)和背景色等。以下是一个完…

云桥通+IDC数据中心:SDWAN企业组网实现高效连接案例

一、需求和背景 云桥通曾服务的一家大型跨国企业C公司,C公司多个数据中心分布在全球各地。为了实现数据共享和协作,数据中心之间需要建立稳定高效的网络连接。然而,传统的MPLS专线网络存在昂贵的成本和漫长的开通周期,无法满足企…

机器学习|线性回归

线性回归是尝试使用一条直线去拟合出图上的节点。 e i e_i ei​为第i个点构成的误差,使用平方的好处一是可以避免正负抵消,二是平方有利于放大大于1的误差的影响,同时缩小误差小于1的影响。 将平方项进行展开,以w作为变元&…

C++指针(二)

个人主页:PingdiGuo_guo 收录专栏:C干货专栏 文章目录 1.数组指针 1.1数组指针的概念 1.2数组指针的用处 1.3数组指针的操作 1.4二维数组如何访问 1.5数组指针访问流程 1.6数组指针的练习题 2.指针数组 2.1指针数组的概念 2.2指针数组的用处 2…

ChemDraw Pro 2022:呈现专业化学绘图的极 致之作 mac/win版

PerkinElmer ChemDraw Pro 2022是一款功能强大的化学绘图软件,专为化学家、科研工作者和教育者设计。这款软件凭借其卓越的性能和丰富的功能,已经成为化学绘图领域的领导者。 PerkinElmer ChemDraw Pro 2022软件获取 ChemDraw Pro 2022提供了广泛的化学…

【Chat GPT4.0】:智能对话的巅峰之作

Chat GPT4.0:智能对话的巅峰之作 Chat GPT4.0是基于GPT4.0架构开发的一款强大的智能对话模型,标志着智能对话技术的巅峰之作。本文将介绍Chat GPT4.0的创新之处以及对智能对话领域的重要意义。 Chat GPT4.0的创新之处 Chat GPT4.0在前一版本的基础上进…

接口自动化测试用例如何设计,一文搞定!

说到自动化测试,或者说接口自动化测试,多数人的第一反应是该用什么工具,比如:Python Requests、Java HttpClient、Apifox、MeterSphere、自研的自动化平台等。大家似乎更关注的是哪个工具更优秀,甚至出现“ 做平台的 &…

大数据开发规范-(更新版)

介绍 大数据是什么,大数据是指规模庞大、种类繁多且处理速度快到难以使用传统数据库和软件工具来捕捉、管理和处理的数据集合。这些数据通常包括结构化数据(如关系数据库中的数据)、半结构化数据(如XML文件)和非结构化…

【leetcode】反转链表

大家好,我是苏貝,本篇博客带大家刷题,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 方法1 .将箭头方向逆转方法2. 点击查看题目 方法1 .将箭头方向逆转 思路: n1,n2,n3分别指…