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

Vue 子路由页面发消息给主路由页面 ，实现主页面显示子页面的信息

news 文章来源：https://blog.csdn.net/gdgztt/article/details/134888423 2024/9/20 16:49:22

需求

子页面进入后，能在主页面显示子页的相关信息，比如说主页面的菜单激活的是哪个子页面的菜单项

如上图，当刷新浏览器页面时，让菜单的激活项仍保持在【最近浏览】。

实现方式：

在子页面的create事件中增加：

    created(){console.log("子路由打开=====", this.$route.path)this.$emit("childOpen", this.$route.path);},

主页面 router-view 中 增加：

      <router-view @childOpen="childOpen"></router-view>  ...childOpen(url) {console.log("url1====", url)if (url == "/recovery") {this.activeMenu = "recovery"}else if (url == "/history") {this.activeMenu = "history"}else if (url == "/person") {this.activeMenu = "person"}else if (url == "/collect") {this.activeMenu = "collect"}},

主页面菜单相关代码：

      <div class="menu"><div class="item pointer" :class="{'activeMenu' : activeMenu=='person'}"  @click="menuClick('person')"><img class="huiyuan-ico" src="@/assets/images/kongjian2.png"/><div>个人空间</div></div><div class="item pointer" :class="{'activeMenu' : activeMenu=='history'}"  @click="menuClick('history')"><img class="huiyuan-ico" src="@/assets/images/history2.png"/><div>最近浏览</div></div><div class="item pointer" :class="{'activeMenu' : activeMenu=='collect'}"  @click="menuClick('collect')"><img class="huiyuan-ico" src="@/assets/images/like2.png"/><div>我的收藏</div></div><div class="item pointer" :class="{'activeMenu' : activeMenu=='recovery'}"  @click="menuClick('recovery')"><img class="huiyuan-ico" src="@/assets/images/hsz2.png"/><div>收回站</div></div></div>

这样，当子路由的页面create后，就会告诉主页面，「我打开了」，主页面收到消息后，得到了具体的页面地址，通过地址判断是打开了哪个页面，从页主页面就激活具体的哪项菜单。

相关文章：

Vue 子路由页面发消息给主路由页面 ，实现主页面显示子页面的信息

需求 子页面进入后&#xff0c;能在主页面显示子页的相关信息&#xff0c;比如说主页面的菜单激活的是哪个子页面的菜单项 如上图&#xff0c;当刷新浏览器页面时&#xff0c;让菜单的激活项仍保持在【最近浏览】。 实现方式&#xff1a; 在子页面的create事件中增加&#xff…...

编程日记 2023/12/9 5:57:22

AR技术详解

1.AR技术平台 1.手机端 2.AR眼镜端 3.WebAR。 2.AR基础技术应用 1.平面检测技术 2.模型识别技术 3.图片识别技术 4.AR云&#xff08;云锚点&#xff09;技术 5.人脸检测技术 3.主要AR技术SDK 1.苹果ARKit&#xff0c;谷歌ARCore。 优点&#xff1a;推荐使用Unity开发&#xf…...

编程日记 2023/12/9 5:56:22

h5或uniapp或微信小程序，实现左上角返回到指定页面，侧滑左滑返回指定页面，安卓物理返回键返沪指定页面解决思路的思考

h5或uniapp或微信小程序&#xff0c;实现左上角返回到指定页面&#xff0c;侧滑左滑返回指定页面&#xff0c;安卓物理返回键返沪指定页面 uniapp开发app,(非微信小程序)uniapp写的微信小程序 uniapp开发app,(非微信小程序) 自定义的左上角返回按钮 <i class"iconfon…...

编程日记 2023/12/9 5:55:21

轻量封装WebGPU渲染系统示例＜43＞- PBR材质与阴影实(源码)

原理简介: 1. 基于rendering pass graph实现。 2. WGSL Shader 基于文件系统和宏机制动态组装。 当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/PBRShadowTest.ts 当前示例运行效果: 此示例基于此渲染系统实现&a…...

编程日记 2023/12/9 5:52:18

macOS Big Sur/Mac电脑安装vscode显示您没有权限来打开应用程序‘Visual Studio Code‘ 请联系您的电脑或网络管理员问题修复

错误方法 首先我以为我的权限不足。&#xff0c;需要去用户群组里设置。结果根本不是这个的问题。 1.在系统偏好设置->用户与群组检查了一下我的用户是不是管理员 结果发现是管理员 2.根据苹果提示&#xff0c;右键我的文件夹->显示简介->最下面的共享与权限 解锁&…...

编程日记 2023/12/9 5:51:17

jsp 如何批量改随机人名

对比图 <% page language"java" contentType"text/html; charsetUTF-8"pageEncoding"UTF-8"%> <%page import"java.sql.ResultSet"%> <%page import"java.sql.PreparedStatement"%> <%page import&qu…...

编程日记 2023/12/9 5:50:16

android项目实战之编辑器集成

引言 项目需要用到编辑器&#xff0c;采用RichEditor&#xff0c;如下效果 实现 1. 引入库2 implementation jp.wasabeef:richeditor-android:2.0.0 2. XML <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width&q…...

编程日记 2023/12/9 5:49:15

JAVA程序如何打jar和war问题解决

背景: 近期研究一个代码审计工具 需要jar包 jar太多了 可以将jar 打成war包 首先看下程序目录结构 pom.xml文件内容 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"ht…...

编程日记 2023/12/9 5:48:13

Microsoft 365 Copilot正式上线，如何稳定访问体验？

如果将微软对人工智能的投资看成一场豪赌&#xff0c;Microsoft Copilot无疑是现阶段最受瞩目的赌注。2023年9月正式发布的Microsoft Copilot是一种基于大型语言模型&#xff08;LLM&#xff09;和微软图形&#xff08;Microsoft Graph&#xff09;的数据和人工智能&#xff08…...

编程日记 2023/12/9 5:47:12

【安卓】安卓xTS之Media模块 学习笔记(3) VTS测试

1. 背景 接下来进行正式的VTS测试。本章节还是以Media模块相关进行介绍。 VTS主要测的是内核和HAL层&#xff0c;media的hal层是以openMax&#xff08;即将废弃&#xff0c;今日2023.12&#xff09; 和 Codec2 (后续主流) 接口为主。 这里我们只看Codec2的要求&#xff0c;CDD…...

编程日记 2023/12/9 5:45:11

Go实现http同步文件操作 - 增删改查

http同步文件操作 - 增删改查 http同步文件操作 - 增删改查1. 前置要求1.1. 构建结构体 文件名 文件内容1.1.1. 页面结构体1.1.2. 为Page结构体绑定方法&#xff1a;Save1.1.3. 对Page结构体支持页面内容查看方法&#xff0c;同时提供页面文件是否存在的方法 1.2. 简单验证上面…...

编程日记 2023/12/9 5:44:10

Spring Boot整合 Spring Security

Spring Boot整合 1、RBAC 权限模型 RBAC模型&#xff08;Role-Based Access Control&#xff1a;基于角色的访问控制&#xff09; 在RBAC模型里面&#xff0c;有3个基础组成部分&#xff0c;分别是&#xff1a;用户、角色和权限&#xff0c;它们之间的关系如下图所示 SELECT…...

编程日记 2023/12/9 5:43:09

浅谈低代码

低代码开发是近年来迅速崛起的软件开发方法&#xff0c;让编写应用程序变得更快、更简单。有人说它是美味的膳食&#xff0c;让开发过程高效而满足&#xff0c;但也有人质疑它是垃圾食品&#xff0c;缺乏定制性与深度。你认为低代码到底是美以下方向仅供参考。味的膳食还是垃圾…...

编程日记 2023/12/9 5:42:08

Innodb-ruby深入探索Innodb存储结构

达在之前已经分享过Innodb数据存储结构知识&#xff0c;但是都是基于理论原理知识理解&#xff0c;今天利用Innodb文件解析工具ruby进行探索Innodb真实的存储结构。 索引原理过程&#xff1a;【Mysql】 InnoDB引擎深入 - 数据页 | 聚集索引_innodb的聚集索引的数据插入_Surviv…...

编程日记 2023/12/9 5:41:07

Echarts的使用 笔记

1.数据可视化前言 1.1.什么是数据可视化 数据可视化&#xff1a; 就是把数据以更加直观的方式进行呈现. 1.2.数据可视化的好处 清晰有效地传达与沟通信息更容易洞察隐藏在数据中的信息 2.ECharts的基本使用 2.1.ECharts官网 ECharts是百度公司开源的一个使用 JavaScript 实…...

编程日记 2023/12/9 5:40:06

信息系统工程的基本概念

系统是由相互作用和相互依赖的若干部分&#xff0c;按一定规律结合成的、具有特定功能的有机整体。系统有下述特性&#xff1a; &#xff08;1&#xff09;集合性。系统是由许多元素有机地组成的整体。每个元素服从整体&#xff0c;追求全局最优。 &#xff08;2&#xff09;相…...

编程日记 2023/12/9 5:37:03

SAP UI5 walkthrough step10 Descriptor for Applications

在这一步&#xff0c;我们将会把所有的应用相关的描述性的文件独立放到manifest.json 新建一个manifest.json文件 webapp/manifest.json (New) {"_version": "1.58.0","sap.app": {"id": "ui5.walkthrough","i18n&q…...

编程日记 2023/12/9 5:35:01

打造专属小程序，乔拓云模板平台助力商家抢占先机

打造专属小程序&#xff0c;乔拓云模板平台助力商家抢占先机&#xff01;该平台涵盖全行业小程序模板&#xff0c;一键复制即可上线。 想要快速创建高效实用的小程序&#xff0c;乔拓云小程序模板开发平台为您提供了解决方案&#xff01;我们为您提供一系列精心设计的小程序模板…...

编程日记 2023/12/9 5:32:59

Vue2学习（组件的使用）

Vue中使用组件的三个步骤&#xff1a; 一、定义组件(或者叫创建组件) 使用Vue.extend(options)创建&#xff0c;其中options和new Vue(options)时传入的那个options几乎一样&#xff0c;但也有点区别&#xff1b; 区别如下&#xff1a; 1.el不要写&#xff0c;为什么&#x…...

编程日记 2023/12/9 5:31:58

基于Spring、SpringMVC、MyBatis开发的游乐场管理系统

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis开发的游…...

编程日记 2023/12/9 5:30:57

数据清洗、特征工程和数据可视化、数据挖掘与建模的应用场景

1.5 数据清洗、特征工程和数据可视化、挖掘建模的应用场景 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.5节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应…...

编程日记 2023/12/9 5:29:55

Qt简介、工程文件分离、创建Qt工程、Qt的帮助文档

QT 简介 core&#xff1a;核心模块&#xff0c;非图形的接口类&#xff0c;为其它模块提供支持 gui&#xff1a;图形用户接口&#xff0c;qt5之前 widgets&#xff1a;图形界面相关的类模块 qt5之后的 database&#xff1a;数据库模块 network&#xff1a;网络模块 QT 特性 开…...

编程日记 2023/12/9 5:28:54

机器学习与低代码开发：创新驱动的双剑合璧

引言 随着科技的日新月异&#xff0c;机器学习和低代码开发已经成为引领技术行业变革的两大重要趋势。机器学习通过模拟人类的学习方式&#xff0c;让计算机具备了自我学习和预测的能力&#xff0c;打破了传统计算机程序的局限性。而低代码开发则以简化软件开发过程为目标&…...

编程日记 2023/12/9 5:27:53

企业博客SEO：优化SOP，助您提升搜索引擎可见性

企业博客是互联网时代企业与用户沟通的重要渠道之一&#xff0c;引流成本也比较低。然而&#xff0c;依然有企业会处在3种状态&#xff1a; 1. 有博客&#xff0c;但内容更新不积极或搁置 2. 有博客&#xff0c;但内容散乱 3. 根本就没有博客 如果是这几种状态&#xff0c;…...

编程日记 2023/12/9 5:26:53

[HITCON 2017]SSRFme perl语言的 GET open file 造成rce

这里记录学习一下 perl的open缺陷 这里首先本地测试一下 发现这里使用open打开 的时候 如果通过管道符 就会实现命令执行 然后这里注意的是 perl 中的get 调用了 open的参数 所以其实我们可以通过管道符实现命令执行 然后这里如果file可控那么就继续可以实现命令执行 这里就…...

编程日记 2023/12/9 5:25:52

华为配置Smart Link主备备份示例

定义 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个接口作为另一个的备份。Smart Link常用于双上行组网&#xff0c;提供可靠高效的备份和快速的切换机制。 Monitor Link是一种接口联动方案&#xff0c;它通过监控设备的上行接口…...

编程日记 2023/12/9 5:24:51

harmonyOS开发技巧（一）——封装hilog日志

1. 创建sharedLibrary共享hsp包commonLib&#xff1a;功能工具类。 import hilog from ohos.hilog;class Logger {private DOMAIN: number 0x0000;private APP_NAME: string Myapplication;public info(tag: string, ...args: string[]) {hilog.info(this.DOMAIN, [${this.A…...

编程日记 2023/12/9 5:23:50

npm、yarn常用命令

1、设置npm路径 #全局安装路径 npm config set prefix "D:\Program Files\nodejs\node_global" #缓存路径 npm config set cache "D:\Program Files\nodejs\node_cache"2、设置镜像 #1,淘宝镜像源 npm config set registry https://registry.npmmirror.…...

编程日记 2023/12/9 5:22:49

编译和使用WPS-ghrsst-to-intermediate生成SST

一、下载 V1.0 https://github.com/bbrashers/WPS-ghrsst-to-intermediate/tree/masterV1.5&#xff08;使用过程报错&#xff0c;原因不详&#xff0c;能正常使用的麻烦告知一下方法&#xff09; https://github.com/dmitryale/WPS-ghrsst-to-intermediate二、修改makefile…...

编程日记 2023/12/9 5:21:48

通过静态HTTP实现负载均衡

在当今的互联网环境中&#xff0c;随着用户数量的不断增加和业务需求的不断扩大&#xff0c;单台服务器往往无法承受所有的访问压力。为了确保网站的可用性和性能&#xff0c;负载均衡成为了一种常见的解决方案。本文将探讨如何通过静态HTTP实现负载均衡&#xff0c;以提升网站…...

编程日记 2023/12/9 5:20:47

Python开发运维：Python常见异常类型

目录 一、理论 1.异常 一、理论 1.异常 &#xff08;1&#xff09;概念 异常是程序因为某种原因无法正常工作了&#xff0c;比如缩进错误、缺少软件包、环境 错误、连接超时等都会引发异常。 一个健壮的程序应该把所能预知的异常都应做相应的处理&#xff0c;保障程序长期运…...

编程日记 2023/12/9 5:19:47

HarmonyOS学习 第1节 DevEco Studio配置

俗话说的好&#xff0c;工欲善其事,必先利其器。我们先下载官方的开发工具DevEco Studio. 下载完成后&#xff0c;进行安装。 双击DevEco Studio&#xff0c;点击Next按照指引完成安装 重新启动DevEco&#xff0c;点击 Agree 进入环境配置&#xff0c;安装Node.js和ohpm 点击Ne…...

编程日记 2023/12/9 5:18:46

WordPress 注册/重置密码/更改密码钩子

wordpress在提供邮件提醒的地方都留了hook&#xff0c;方便让开发者自定义。最新在添加第三方登录时遇到虚拟邮箱发信问题&#xff0c;为了防止给指定邮件地址后缀发信&#xff0c;可以利用如下wordpress提供的钩子来实现。 //https://www.wwttl.com/101.html //禁止用户注册时…...

编程日记 2023/12/9 5:17:45

LabVIEW开发远程结构健康监测系统

LabVIEW开发远程结构健康监测系统 工程师依赖于振动监测来评估建筑物、桥梁和其他大型结构的完整性。传统的振动监测工具在数据收集上存在限制&#xff0c;无法长时间收集高保真波形。随着内存存储、处理器速度和宽带无线通信技术的进步&#xff0c;出现了对能够长时间收集并实…...

编程日记 2023/12/9 5:14:42

多段图问题-动态规划解法

一、多段图问题 问题描述&#xff1a;设图G(V, E)是一个带权有向图&#xff0c;如果把顶点集合V划分成k个互不相交的子集Vi (2≤k≤n, 1≤i≤k)&#xff0c;使得对于E中的任何一条边(u, v)&#xff0c;必有u∈Vi&#xff0c;v∈Vim (1≤i≤k, 1&#xff1c;im≤k)&#xff0c;…...

编程日记 2023/12/9 5:13:41

Android实验：绑定service实验

目录 实验目的实验内容实验要求项目结构代码实现代码解释结果展示 实验目的 充分理解Service的作用&#xff0c;与Activity之间的区别&#xff0c;掌握Service的生命周期以及对应函数&#xff0c;了解Service的主线程性质&#xff1b;掌握主线程的界面刷新的设计原则&#xff…...

编程日记 2023/12/9 5:09:37

K8S集群优化的可执行优化

目录 前期环境优化 1.永久关闭交换分区 2.#加载 ip_vs 模块 3.调整内核参数 4.#使用Systemd管理的Cgroup来进行资源控制与管理 5.开机自启kubelet 6.内核参数优化方案 7.etcd优化 默认etcd空间配额大小为 2G&#xff0c;超过 2G 将不再写入数据。通过给etcd配置 --quo…...

编程日记 2023/12/9 5:08:36

Remix IDE 快速开始Starknet

文章目录 一、Remix 项目二、基于Web的开发环境Remix 在线 IDE三、Starknet Remix 插件如何使用使用 Remix【重要】通过 Starknet by Example 学习一、Remix 项目 Remix 项目网站 在以太坊合约开发领域，Remix 项目享有很高的声誉，为各个级别的开发人员提供功能丰富的工具集…...

编程日记 2023/12/9 5:06:35

SQL中limit与分页的结合

select * from test limit 2,10; 这条语句的含义&#xff1a;从第3条语句开始查询&#xff0c;共显示10条语句。 select * from test limit a,b; a0,第一条记录。 a1,第二条记录。 a2,第三条记录。 这条语句的含义&#xff1a;从第a1条语句开始查询&#xff0c;共显示b条…...

编程日记 2023/12/9 5:04:33

KALI LINUX信息收集

预计更新 第一章 入门 1.1 什么是Kali Linux&#xff1f; 1.2 安装Kali Linux 1.3 Kali Linux桌面环境介绍 1.4 基本命令和工具 第二章 信息收集 1.1 网络扫描 1.2 端口扫描 1.3 漏洞扫描 1.4 社交工程学 第三章 攻击和渗透测试 1.1 密码破解 1.2 暴力破解 1.3 漏洞利用 1.4 …...

编程日记 2023/12/9 5:01:30

联想电脑重装系统Win10步骤和详细教程

联想电脑拥有强大的性能&#xff0c;很多用户办公都喜欢用联想电脑。有使用联想电脑的用户反映系统出现问题了&#xff0c;想重新安装一个正常的系统&#xff0c;但是不知道重新系统的具体步骤。接下来小编详细介绍给联想电脑重新安装Win10系统系统的方法步骤。 推荐下载 系统之…...

编程日记 2023/12/9 5:00:30

PET（Point-Query Quadtree for Crowd Counting, Localization, and More）

PET&#xff08;Point-Query Quadtree for Crowd Counting, Localization, and More&#xff09; 介绍实验记录训练阶段推断阶段 介绍 论文&#xff1a;Point-Query Quadtree for Crowd Counting, Localization, and More 实验记录 训练阶段 TODO 推断阶段 下面是以一张输…...

编程日记 2023/12/9 4:58:28

NgRx中dynamic reducer的原理和用法？

在 Angular 应用中&#xff0c;使用 NgRx 状态管理库时&#xff0c;动态 reducer 的概念通常是指在运行时动态添加或移除 reducer。这样的需求可能源于一些特殊的场景&#xff0c;比如按需加载模块时&#xff0c;你可能需要添加相应的 reducer。 以下是动态 reducer 的一般原理…...

编程日记 2023/12/9 4:57:27

麒麟V10服务器安装Apache+PHP

安装PHP yum install php yum install php-curl php-gd php-json php-mbstring php-exif php-mysqlnd php-pgsql php-pdo php-xml 配置文件 /etc/php.ini 修改参数 date.timezone Asia/Shanghai max_execution_time 60 memory_limit 1280M post_max_size 200M file_upload…...

编程日记 2023/12/9 4:56:25

DOS 批处理 （一）

DOS 批处理 1. 批处理是什么&#xff1f;2. DOS和MS-DOS3. 各种操作系统shell的区别Shell 介绍图形用户界面&#xff08;GUI&#xff09;shell命令行界面&#xff08;CLI&#xff09;的 shell命令区别 1. 批处理是什么&#xff1f; 批处理(Batch)&#xff0c;也称为批处理脚本…...

编程日记 2023/12/9 4:53:23

P1047 [NOIP2005 普及组] 校门外的树题解

题目 某校大门外长度为 l 的马路上有一排树&#xff0c;每两棵相邻的树之间的间隔都是1 米。我们可以把马路看成一个数轴&#xff0c;马路的一端在数轴 00 的位置&#xff0c;另一端在l 的位置&#xff1b;数轴上的每个整数点&#xff0c;即0,1,2,…,l&#xff0c;都种有一棵树…...

编程日记 2023/12/9 4:51:20

pip的常用命令

安装、卸载、更新包&#xff1a;pip install [package-name]&#xff0c;pip uninstall [package-name]&#xff0c;pip install --upgrade [package-name]。升级pip&#xff1a;pip install --upgrade pip。查看已安装的包&#xff1a;pip list&#xff0c;pip list --outdate…...

编程日记 2023/12/9 4:50:18

力扣面试题 08.12. 八皇后（java回溯解法）

Problem: 面试题 08.12. 八皇后 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 八皇后问题的性质可以利用回溯来解决&#xff0c;将大问题具体分解成如下待解决问题&#xff1a; 1.以棋盘的每一行为回溯的决策阶段&#xff0c;判断当前棋盘位置能否放置棋子 2.如何判…...

编程日记 2023/12/9 4:48:17

2023年第十二届数学建模国际赛小美赛A题太阳黑子预测求解分析

2023年第十二届数学建模国际赛小美赛 A题 太阳黑子预测 原题再现&#xff1a; 太阳黑子是太阳光球上的一种现象&#xff0c;表现为比周围区域暗的暂时斑点。它们是由抑制对流的磁通量浓度引起的表面温度降低区域。太阳黑子出现在活跃区域内&#xff0c;通常成对出现&#xff…...

编程日记 2023/12/9 4:46:15

jsp 分页查询展示,实现按 上一页或下一页实现用ajax刷新内容

要实现按上一页或下一页使用 Ajax 刷新内容&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 在前端页面中添加两个按钮&#xff0c;分别为“上一页”和“下一页”。当用户点击按钮时&#xff0c;触发 Ajax 请求。 2. 在后端控制器中接收 Ajax 请求&#xff0c;并根据传…...

编程日记 2023/12/9 4:44:12