vue3+element导航，使用路由后刷新导致页面与导航激活项不匹配

最新推荐文章于 2024-11-29 01:21:35 发布

NPC_R

最新推荐文章于 2024-11-29 01:21:35 发布

阅读量539

点赞数 3

分类专栏：回收站文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44119002/article/details/129837156

版权

回收站专栏收录该内容

7 篇文章

订阅专栏

文章讨论了一个技术问题，即页面刷新后默认转到临时状态，期望的是按钮激活。问题源于默认激活绑定到了以数字为index的元素，而实际index是字符串。提出的解决方案是利用路由的path作为index值来实现正确的激活状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、案例说明

刷新后默认转到临时，期望值为按钮激活

二、原因分析

默认激活绑定了以数字为index，每次加载时默认激活第一个

index是字符串，由此可通过路由的path去进行对应激活

三、解决方案

通过将路径名作为index的值进行激活

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

NPC_R

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3页面激活与离开的回调函数封装，hooks实现

u013553807的博客

01-11

1137

在项目中，有时候需要对用户在不在本页面做逻辑处理，检查当前页面是否是激活状态。比如短信倒计时功能，用户切换到别的页面，是否让倒计时停止。用户离开页面是否让一些周期性逻辑停止，用户又进入页面是否让停止的逻辑再开始。因此，这种功能需要封装一个hooks函数为开发提供遍历。

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

weixin_39783915的博客

12-19

1342

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

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

浏览器的回退和导航栏的选中转态不同步,路由在新窗口打开

qq_45903009的博客

03-18

666

问题是用户后退时候，左边导航栏显示的还是上一个页面的导航，但是路由和页面已经变了 <div class="con-box"> <ul class="con-box-ul"> <li class="con-box-ul-li" v-for="(v, i) in headerList" :key="i" :class="v.url === tempUrl ? 'acti

解决vue3 el-menu 刷新页面菜单选中项和路由不匹配

hzxOnlineOk的博客

10-15

2748

网上找到的方法有2种： 1、给el-menu组件增加属性 :default-active="this.$route.path" 但是博主试了下，打印出来的路由this.$route.path一直是/，放弃 2、通过this.$router.currentRoute console.log('当前路由', this.$router.currentRoute); 所以我们可以通过this.$router.currentRoute._value.fullPath访问到当前激活的url，然后将.

vue 解决刷新页面时，tabbar和页面不匹配的问题

u010613970的博客

11-11

2141

开发移动端时，一般来说，tabbar在整个vue项目中都会单独取出来做成一个组件，那么很多时候会遇到一种情况，打开网站打tabbar默认为0，我们跳转到tabbar为2的页面后，刷新页面，tabbar变回0了，这时候就得想办法解决这问题代码如下： mounted() { /* 直接在tabbar组件页面监听，判断当前页面是哪个页面, 解决刷新时,tab默认为 0 的bug */ const navBarActive = window.location.hash

vue从地址栏输入路径后path和导航按钮不匹配问题

masierty的博客

08-01

663

解决vue从地址栏输入路径后path和导航按钮不匹配问题

解决vue3，动态添加路由，刷新页面出现白屏或者404

最新发布

weixin_65363325的博客

11-29

3821

在做毕设的时候，在权限路由得到时候，我问通过router**.**addRoute(item)的方式，在路由守卫动态添加路由刚开始没什么问题，页面的都能正常显示，网络请求也能发送，后来出现了刷新页面，跳转到404解决方法提取出404代码片段追加到处理好的权限列表的末尾我项目采用的vue-router是4.3.3版本。

vue+element导航栏高亮显示的解决方式

10-16

在使用Element UI的组件时，常常会遇到导航项在页面跳转或刷新后无法正确显示高亮状态的问题。本文将详细介绍如何解决Vue结合Element UI时导航栏高亮显示的问题。首先，我们要了解Element UI的组件是如何根据路由...

Vue页面手动刷新,实现导航栏激活项还原到初始状态

10-14

总之，Vue页面在手动刷新后，为了恢复导航栏的初始状态，我们需要在组件创建后获取当前路由并更新`defaultActiveIndex`的值，同时监听路由变化以应对动态导航。通过这种方式，无论页面是否被刷新，都能保持导航栏的...

Vue 解决父组件跳转子路由后当前导航active样式消失问题

10-15

补充一个额外的知识点，如果你使用的是Element UI的`el-menu`组件，并且结合Vue Router，可能会遇到刷新页面后`default-active`属性与当前路由不一致的问题。为了解决这个问题，可以将`default-active`属性绑定到Vue...

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

wasd2399的博客

02-28

563

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

解决element-ui中导航栏常亮不跟随页面路由

一李

10-21

948

在项目中使用elementui框架中的路由。其中default-active控制导航栏栏目是否跟随页面亮。解决：将default-active绑定自定义的path值，在方法中通过this.$route.path获取当前页面的路由，比对当前页面的路由和获取的路由是否相同，如果不相同，则跳转到指定的路由。 created() { this.path =this.$route.path } changeA(indexX){ if(this.$route.path !==ind

vue3动态路由刷新失效解决方案

m0_50360903的博客

01-30

2288

原因：在做vue3后台管理系统的时候，由于路由是从后端获取到的，然后如果没有刷新页面的情况，页面正常跳转也没有问题，但是刷新页面的时候，，在控制台输出的话路由确实存在的，在百度找了很多解决方案，但是没有效果，下面是通过我自己的解决方案，希望能够帮助到大家。

vue html页面跳到路由,vue刷新页面及路由跳转到同一页面的刷新问题

weixin_35766215的博客

06-03

713

一、直接刷新当前页面的方新直能分支调二浏页器朋代说法this.$router.go(0)二、览页些求时是过解些这确如目前例总站回广随路由跳转到同一页面不刷新(页面内是能览调不页新代些事几求事都时学下是事功过发,解的路由跳转)下得行更是u告果款近刚交易一c屏。基近刚交面展示了一个vue组件的跳转逻辑，通过router-view的key不断更新，确保每次跳转到的路由好像是不一样的，实现每次进行路由跳转...

vue3——element-plus 实现页面刷新之后，保持菜单的激活状态

wlijun_0808的博客

11-17

3097

vue3——element-plus 实现页面刷新之后，保持菜单的激活状态

vue后台管理系统学习(3)--添加左侧导航

游响云停专栏

10-24

5252

VUE后台管理系统左侧默认已经有了很多菜单，但是自己要想加一个菜单，对于刚接触的朋友来说，还是比较懵逼的，个人演讲了2天，才找到了添加菜单的顺序，添加了一个基础数据模块，下面有用户管理和客户管理两个菜单，如下图由于后台管理系统是多语言，所有我们先找到语言的配置文件，添加导航 1.修改语言配置文件由于我们做的是中文版的，找到zh.js文件，在route里面添加对应的菜单名...

element-ui 初次访问页面导航菜单默认高亮激活

Fabbom的博客

03-25

5224

element-ui 导航菜单默认激活今天遇到一个和element-ui导航菜单有关的问题那就是如何在初次访问页面时使某个导航菜单选项为激活状态我这一进去就是首页页面，所以首页这个选项应该是高亮的我的代码： html： <el-menu :default-active="activePath" :router="true" class="el-menu-vertical-demo...

vue3+餓了麽plus刷新就失效

qq_32412403的博客

04-20

170

vue3+餓了麽plus刷新就失效

element-plus中菜单组件属性 default-active

Fatfish_tree的博客

01-14

1775

但是在调试时发现default-active默认激活菜单这个属性没有起作用----->无论是初次刷新还是选择某个菜单后刷新都不会激活菜单所有的菜单项是合上的状态。在使用时，陷入了一个误区以为是绑定某个string类型的数字但是这个绑定值是和菜单数据中所有子菜单的数据相关的绑定的是子菜单中的唯一值。我这里绑定的是code.Name字段所以default-active他的动态的数据应该是某个子菜单的名称才对。default-active绑定值是和这里的数据一一对应的。

shopvue中实现el-menu刷新时保持菜单项激活状态的方法

资源摘要信息:"在本文中，我们将深入探讨如何在使用Vue 3和HBuilderX开发的前后端分离项目中重构`AdminLayoutComponen.vue`组件，以实现`el-menu`的刷新保持当前菜单选项功能。这通常在管理端的web应用程序中被使用...