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

使用element-ui导航,进入对应的三级页面菜单保持点击状态

1.注意事项

01.路由中使用了keepAlive属性,要用keepAlive:true,不能等于false,使用false页面会刷新

2.使用的方法

3.项目实例

<template><div class="policy-home"><div class="policyNav"><el-menu :default-active="activeIndex"background-color="#486DC0"text-color="#FFFFFF"active-text-color="#FFF000"class="el-menu-demo"mode="horizontal":router="true"><el-menu-item index="/policyjisuan">政策计算器</el-menu-item><el-menu-item index="/searchP">检索</el-menu-item><el-menu-item index="/policyStoreGraphic">政策图解</el-menu-item><el-menu-item index="/applyNews">今日申报</el-menu-item><el-menu-item index="/original">政策原文</el-menu-item></el-menu></div><div class="navContent"><router-view></router-view></div></div>
</template>
<script>export default {data() {return {activeIndex: '/policyjisuan',};},watch: {// 监听路由变化'$route.path': {handler (routePath) {this.initMenuActive(routePath)},immediate: true}},methods: {initMenuActive (routePath) {//路由跳转时,标记在导航的哪个选项下对应的路由,css高亮显示if (routePath == '/loginPolicy') {this.activeIndex = '/policyjisuan'} else if(routePath == '/searchDetail'){this.activeIndex = '/searchP'} else if(routePath == '/applyDetail'){this.activeIndex = '/applyNews'} else if(routePath == '/calculateDetail'){this.activeIndex = '/policyjisuan'} else if(routePath == '/companyDetail'){this.activeIndex = '/policyjisuan'} else if(routePath == '/originalDetail'){this.activeIndex = '/original'} else {this.activeIndex = routePath}},}}
</script><style lang="scss" scoped>/* 导航下页面 */.navContent {min-height: 800px;padding-bottom: 70px;background-color: #fff;}.policyNav {.el-menu-item {text-align: center;border-bottom: none;width: 16%;font-size: 22px;font-weight: 500;background-color: #486DC0 !important;}.el-menu {background-color: #486DC0 !important;}}
</style>

路由配置

js文件
export default [{path: '/policyStoreIndex',name: '政策计算器导航页',redirect: '/policyjisuan',component: () =>import(/* webpackChunkName: "page" */ '@/views/home/policyStoreIndex'),meta: {keepAlive: true,isTab: false,isAuth: false},children: [{path: '/searchP',name: '检索',component: () =>import(/* webpackChunkName: "page" */ '@/views/home/policyStoreNew/searchP'),meta: {keepAlive: true,isTab: false,isAuth: false}}]}]   

相关文章:

使用element-ui导航,进入对应的三级页面菜单保持点击状态

1.注意事项 01.路由中使用了keepAlive属性&#xff0c;要用keepAlive&#xff1a;true&#xff0c;不能等于false&#xff0c;使用false页面会刷新 2.使用的方法 NavMenu 导航菜单 3.项目实例 <template><div class"policy-home"><div class"…...

golang字符串转64位整数

在Go语言中&#xff0c;可以使用strconv包中的ParseInt函数将字符串转换为64位整数。以下是一个示例代码&#xff1a; package main import ( "fmt" "strconv" ) func main() { str : "12345" num, err : strconv.ParseInt(str, 10, 64…...

创作纪念日-我的第1024天

机缘 不知不觉已经成为创作者的第1024天啦… … 刚开始接触博客的初衷就是为了记笔记&#x1f4d2;、记总结&#x1f4dd;&#xff0c;或许对于当时就等同于是为了找工作。坚持学习并持续输出博客一年后&#xff0c;这时我发现再写博客&#xff0c;不在是为了找一份工作&…...

【线上问题】很抱歉,如果没有 JavaScript 支持,将不能正常工作

目录 一、问题说明二、解决方式 一、问题说明 1.修改了nginx的配置 2.postman调用接口正常&#xff0c;浏览器访问接口200&#xff0c;但无数据 3.浏览器访问&#xff0c;nginx没有访问记录&#xff0c;接口请求到不了应用服务 4.原因不祥 二、解决方式 1.清理了浏览器缓存...

便捷、快速、稳定、高性能!以 GPU 实例演示 Alibaba Cloud Linux 3 对 AI 生态的支持 | 龙蜥技术

编者按&#xff1a;日前&#xff0c;Alibaba Cloud Linux 3 为使 AI 开发体验更高效&#xff0c;提供了一些优化升级&#xff0c;本文为“Alibaba Cloud Linux 3 AI 能力介绍”系列文章预告篇&#xff0c;以 GPU 实例为例&#xff0c;为大家演示 Alibaba Cloud Linux 3 对 AI 生…...

创新科技改变城市:智慧城市建设全景展望

在当今科技飞速发展的时代&#xff0c;智慧城市的概念已经成为城市发展的新趋势&#xff0c;为人们的生活带来了前所未有的便利和改变。智慧城市&#xff0c;顾名思义&#xff0c;是以先进的信息技术为基础&#xff0c;通过数字化、互联网化和智能化手段&#xff0c;实现城市基…...

Kotlin 环境下解决属性初始化问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

Java复习-20-接口(3)- 代理设计模式

代理设计模式(Proxy) 功能&#xff1a;可以帮助用户将所有的开发注意力只集中在核心业务功能的处理上。 代理模式(Proxy Pattern)是一种结构性模式。代理模式为一个对象提供了一个替身&#xff0c;以控制对这个对象的访问。即通过代理对象访问目标目标对象&#xff0c;可以在目…...

如何远程访问Linux MeterSphere一站式开源持续测试平台

文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…...

LinuxUbuntu安装OpenWAF

Linux&Ubuntu安装OpenWAF 官方GitHub地址 介绍 OpenWAF&#xff08;Web Application Firewall&#xff09;是一个开源的Web应用防火墙&#xff0c;用于保护Web应用程序免受各种网络攻击。它通过与Web服务器集成&#xff0c;监控和过滤对Web应用程序的流量&#xff0c;识…...

LeetCode 剑指offer 09.用两个栈实现队列

LeetCode 剑指offer 09.用两个栈实现队列 题目描述 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数 appendTail 和 deleteHead &#xff0c;分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素&#xff0c;deleteHead 操作返回…...

第三方软件检测机构有哪些资质,2023年软件测评公司推荐

软件第三方测试报告 伴随着软件行业的蓬勃发展&#xff0c;软件测试也迎来了热潮&#xff0c;但是国内的软件测试行业存在着测试入行门槛低、测试投入少、测试人员专业性不足等问题&#xff0c;这些问题不但会阻碍软件测试行业的良性发展&#xff0c;而且难以保证软件产品的质…...

Unity的GPUSkinning进一步介绍

大家好&#xff0c;我是阿赵。   在几年前&#xff0c;我曾经写过一篇介绍GPUSkinning的文章&#xff0c;这么多年之后&#xff0c;还是看到不停有朋友在翻看这篇旧文章。今天上去GitHub看了一下&#xff0c;GPUSkinning这个开源的插件已经很久没有更新过了&#xff0c;还是停…...

Mysql redolog

一、redolog 是啥 数据库的ACID&#xff1a;A原子性&#xff0c;C一致性&#xff0c;I隔离性&#xff0c;D持久性&#xff1b; redolog&#xff1a;保证 持久性&#xff1b; redolog: 系统奔溃重启时需要按照上述内容所记录的步骤重新更新数据页&#xff0c;特点&#xff1a…...

【设计模式】Head First 设计模式——桥模式 C++实现

设计模式最大的作用就是在变化和稳定中间寻找隔离点&#xff0c;然后分离它们&#xff0c;从而管理变化。将变化像小兔子一样关到笼子里&#xff0c;让它在笼子里随便跳&#xff0c;而不至于跳出来把你整个房间给污染掉。 设计思想 桥模式。将抽象部分(业务功能)与实现部分(平…...

CESM2代码下载

这半年忙着毕业写论文&#xff0c;好久好久好久不更新了∠( ω)&#xff0f; &#xff0c;今天准备开个新坑 ๑乛◡乛๑&#xff0c;学习一下CESM&#xff08;Community Earth System Model&#xff09;&#xff0c;它是一个完全耦合的全球气候模型&#xff0c;可用于地球过去、…...

编写OpenCL程序的基本步骤

opencl pyopencl OpenCL-Headers OpenCL(全称为Open Computing Langugae&#xff0c;开放运算语言)是第一个面向异构系统(此系统中可由CPU&#xff0c;GPU或其它类型的处理器架构组成)的并行编程的开放式标准。 它是跨平台的。 OpenCL由两部分组成&#xff0c;一是用于编写…...

计算机网络之TCP/IP协议第一篇:网络基础知识

文章目录 写给自己的话 一:前言 1:手握金刚钻的TCP/IP 2:计算机中的协议 3:分组...

虚拟机扩容

系统环境centos8&#xff0c;分两步&#xff0c;第一步先在vmware扩容&#xff0c;第二部在虚拟机内部扩容 1.vmware分配磁盘空间 2.虚拟机内部扩容 查看当前磁盘信息&#xff0c;这个是扩容之前的&#xff0c;扩容完成才会显示新的 df -h查看系统分区信息 fdisk -l查看目录…...

Linux下的系统编程——进程间的通信(九)

一、进程间通信常用方式 IPC方式&#xff1a; Linux环境下&#xff0c;进程地址空间相互独立&#xff0c;每个进程各自有不同的用户地址空间。任何一个进程的全局变量在另一个进程中都看不到&#xff0c;所以进程和进程之间不能相互访问&#xff0c;要交换数据必须通过内核&am…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...