Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址

最新推荐文章于 2024-07-29 15:15:19 发布

磊554

最新推荐文章于 2024-07-29 15:15:19 发布

阅读量1.4k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_56716246/article/details/127778672

版权

今天使用Element-plus导航栏组件的时候,点击选中的列表附上高亮,但是点击页面刷新后高亮会回到默认的列表上

查看了Element-plus文档看到default-active属性===页面加载时默认激活菜单的 index

这个时候发现刷新页面,地址栏的地址并没有发生变化,所以想到提取当前页面的url,然后动态渲染到该default-active属性上. 那么如何获取当前页面地址?

首先下载vue-router插件,然后引用useRoute方法,将方法实例化,最后使用

最后问题解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

磊554

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Element-Plus导航栏刷新高亮消失（解决）

Daisy_ls的博客

02-28

1535

element项目左侧导航栏里面的高亮，点击时都正常展示，一旦刷新页面，高亮就消失了，但是页面还是之前点击的页面。为了解决这个问题，试了网上说的所有方法，最后发现是少加了一个符号。

vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题

weixin_39783915的博客

12-19

1287

问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 i...

2 条评论您还未登录，请先登录后发表或查看评论

解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失

qq_65388624的博客

08-23

2164

解决Vue导航栏路由跳转，刷新后导航块高亮消失

基于vue+elementPlus的动态导航标签栏-tabs

最新发布

qq_65325528的博客

07-29

1389

首先用到了element-plus框架中tabs的组件，然后数据我这里是通过vuex来维护的。在点击菜单的同时往vuex相关数据数组中添加一项数据即可，不使用setup语法糖时使用setup语法糖时

Vue Element ui导航栏选中高亮,刷新后选中消失

weixin_47906106的博客

10-17

2855

Vue Element ui导航栏选中高亮,刷新后选中消失

导航栏组件在刷新后选中的高亮丢失

weixin_45039278的博客

08-12

117

1 使用vuex、pinia等仓库，在路由发生变化的时候储存路径，并将其设置为默认高亮的选项。在组件开启路由模式后，由于页面刷新后路由状态丢失，高亮会回到设置的默认高亮。2 用session等保存到本地。

vue 导航锚点_点击平滑滚动,导航栏对应变化详解

10-14

总的来说，Vue 中实现导航锚点的平滑滚动和导航栏对应变化，主要是通过监听滚动事件、计算锚点位置以及平滑滚动到目标位置来完成的。这个过程涉及到DOM操作、事件处理以及数据绑定，是 Vue.js 开发中的基础技能。...

element-ui使用导航栏跳转路由的用法详解

10-18

在`<el-menu>`组件中使用`router`属性时，Vue Router会接管导航栏的点击事件，根据当前的路由状态来切换页面。这里的关键是确保你的路由配置与导航栏组件中的`index`属性一一对应。路由配置是通过Vue Router的`...

石头的实习之路2——Vue+element ui 切换导航栏菜单不高亮问题

qq_44462050的博客

04-14

2448

使用element ui的横向导航栏组件，点击菜单跳转，路由跳转过来了，但是跳转的菜单没有高亮效果。跳转产品中心后，可以看到路由变了，但是没有高亮显示这里采用的跳转方法是在js的methods中写一个方法，通过@click触发方法跳转 methods: { skip_product() { this.$router.push({ path: '/xxxx/product_center' }) } 多方寻找解决办法无果，看到了一位大佬的博客，按照他的方法设置，解

点击Element侧栏导航，顶栏导航的高亮背景效果不消失问题；以及解决刷新导航菜单栏高亮效果消失的问题

qq_39918566的博客

05-12

1261

一、问题描述 1）点击侧栏导航后，顶栏导航的高亮效果还在（问题图片如下，问题已解决）。 2）达到的目的：点击侧栏导航后顶栏导航的高亮背景消失；点击顶栏导航时侧栏导航的高亮效果消失。二、实现过程使用了Select（菜单激活回调），清空了左侧菜单栏的高亮样式。以下是部分代码，以顶栏导航的为例子，侧栏导航同理可实现。 1.HTML部分：  <el-menu router :default-acti

Vue 刷新页面导航显示高亮位置不对-----已解决

JS 实现全选和反选

12-24

1398

Vue 刷新页面导航菜单显示高亮位置不对

解决vue项目刷新后,导航菜单高亮显示的位置不对问题

10-16

今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue-router进入页面时导航栏没有active效果

qq_25302061的博客

10-25

1729

{path:'/',component:'/x'}这样进入页面时会有加载组件的效果，但是导航栏没有active效果。可以改为[{path:'/',redirect:'/x'},{path:'/x',component:'/x'}]

解决element-ui侧边导航在页面刷新后失去高亮的问题

littlebearGreat——宁静致远

07-06

8728

element-ui + vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题1. element-ui 提供一个属性 :default-active='activeNav' 来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active 的值即可。下面是我写的配置文件/...

Vue3+Element-Plus 实现点击左侧菜单列表时高亮状态保持的功能三十

build2024

12-16

7926

1.实现的效果 2.实现高亮状态保持的原理 2.1 结合官网Menu 菜单项里面有一个属性 default-active default-active 默认激活菜单的 index。并且该属性接收的值是 string 类型小知识 default-active 属性的作用就是说，如果点击左侧菜单列表的某一项时，需要给当前点击选中的菜单列表呈现出激活高亮的状态，那么就需要把当前点击选择的菜单项index 值赋给这个属性。由于index 类型是string, 所以我们可以...

vuejs3+elementPlus后台管理系统，左侧菜单栏制作，跳转、默认激活菜单

宝码香车的博客

06-20

626

vuejs3+elementPlus后台管理系统，左侧菜单栏制作，跳转、默认激活菜单。

element框架导航菜单在页面刷新时会回到默认项

qq_15769147的博客

08-09

2392

<template> <div> <el-menu :default-active="activeIndex" router class="el-menu-vertical-demo" @select="handleSelect" background-color="#545c...

网站页面刷新后,导航菜单高亮显示的位置不对问题

wasd2399的博客

02-28

439

解决公共页面路由跳转刷新高亮丢失问题

vue3 element 导航菜单的使用

weixin_45932157的博客

11-23

982

<template> <div> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1', '3']" @select="menuselect"> <el-subm

element-plus点击按钮展开导航栏

07-26

Element Plus 是一套基于 Vue.js 的桌面端组件库。在 Element Plus 中实现点击按钮展开导航栏的功能，你需要结合 HTML、CSS 和 JavaScript 来完成这个任务。 ### 技术栈概述： 1. **HTML**：用于创建页面结构。 2. **CSS**：通过样式控制元素的外观，包括但不限于按钮和导航栏的显示状态。 3. **JavaScript / Vue.js**：用于处理用户交互事件，如按钮点击事件，并更新界面状态。 ### 实现步骤： #### 步骤 1: 创建基础组件首先，在 `src/components` 目录下创建一个新的 `.vue` 文件，例如命名为 `Navbar.vue`: ```html <template> <div class="navbar"> <button @click="toggleCollapse">展开/收起</button> <nav v-if="isCollapsed === false" class="menu">  <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a></li> </ul> </nav> </div> </template> <script> export default { data() { return { isCollapsed: true, }; }, methods: { toggleCollapse() { this.isCollapsed = !this.isCollapsed; }, }, }; </script> <style scoped> .navbar { display: flex; justify-content: space-between; } .menu { display: none; } </style> ``` 在这个例子中，我们定义了一个名为 `Navbar` 的基本组件，它包含一个按钮和一个条件渲染的导航菜单。当按钮被点击时，将调用 `toggleCollapse` 方法改变 `isCollapsed` 属性的值，进而切换导航栏的状态。 #### 步骤 2: 引入并注册组件到主应用接下来，在项目的 `main.js` 或 `App.vue` 中引入并注册 `Navbar` 组件： ```javascript import Vue from 'vue'; import App from './App.vue'; import Navbar from './components/Navbar.vue'; Vue.component('navbar-component', Navbar); new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 这里我们引入了 `Navbar` 组件，并将其作为 Vue 应用的一部分进行注册。 #### 步骤 3: 在应用视图中使用组件最后，在 `App.vue` 文件或需要展示导航栏的位置引入并使用 `Navbar` 组件： ```html <template> <div id="app"> <navbar-component /> </div> </template> ``` 通过以上步骤，你可以成功地在 Element Plus 中实现点击按钮展开导航栏的功能。为了提高用户体验，你还可以进一步优化界面设计和交互逻辑，比如添加动画效果、键盘操作支持等。 ###