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

最新推荐文章于 2023-08-03 17:46:36 发布
最新推荐文章于 2023-08-03 17:46:36 发布
阅读量310 收藏 1
点赞数
分类专栏： # 前端-组件库-ElementUI # 前端-框架-Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44119002/article/details/129837156
版权

一、案例说明

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

 二、原因分析

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

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

 三、解决方案

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

 

 

 

HostS_S
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element导航+标签导航+路由跳转+路由转换.zip
05-21
vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3.0 +element plus 实现页面刷新 菜单栏保持选中状态
热门推荐
菊次郎の夏的博客
05-13 1万+
:default-active="activeIndex"
vue 解决刷新页面时，tabbar和页面不匹配的问题
u010613970的博客
11-11 2037
开发移动端时，一般来说，tabbar在整个vue项目中都会单独取出来做成一个组件，那么很多时候会遇到一种情况，打开网站打tabbar默认为0，我们跳转到tabbar为2的页面后，刷新页面，tabbar变回0了，这时候就得想办法解决这问题 代码如下： mounted() { /* 直接在tabbar组件页面监听，判断当前页面是哪个页面, 解决刷新时,tab默认为 0 的bug */ const navBarActive = window.location.hash
vue从地址栏输入路径后path和导航按钮不匹配问题
masierty的博客
08-01 593
解决vue从地址栏输入路径后path和导航按钮不匹配问题
解决element-ui中导航栏常亮不跟随页面路由
一李
10-21 898
在项目中使用elementui框架中的路由。其中default-active控制导航栏栏目是否跟随页面亮。 解决： 将default-active绑定自定义的path值，在方法中通过this.$route.path获取当前页面的路由，比对当前页面的路由和获取的路由是否相同，如果不相同，则跳转到指定的路由。 created() { this.path =this.$route.path } changeA(indexX){ if(this.$route.path !==ind
vue html页面跳到路由,vue刷新页面及路由跳转到同一页面的刷新问题
weixin_35766215的博客
06-03 638
一、直接刷新当前页面的方新直能分支调二浏页器朋代说法this.$router.go(0)二、览页些求时是过解些这确如目前例总站回广随路由跳转到同一页面不刷新(页面内是能览调不页新代些事几求事都时学下是事功过发,解的路由跳转)下得行更是u告果款近刚交易一c屏。基近刚交面展示了一个vue组件的跳转逻辑，通过router-view的key不断更新，确保每次跳转到的路由好像是不一样的，实现每次进行路由跳转...
vue后台管理系统学习(3)--添加左侧导航
游响云停专栏
10-24 5164
VUE后台管理系统左侧默认已经有了很多菜单，但是自己要想加一个菜单，对于刚接触的朋友来说，还是比较懵逼的，个人演讲了2天，才找到了添加菜单的顺序，添加了一个基础数据模块，下面有用户管理和客户管理两个菜单，如下图 由于后台管理系统是多语言，所有我们先找到语言的配置文件，添加导航 1.修改语言配置文件 由于我们做的是中文版的，找到zh.js文件，在route里面添加对应的菜单名...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
在Vue.js框架中，结合...总结起来，动态加载路由方式使得Vue+Element UI应用能够灵活地根据用户权限和业务需求展示菜单，同时优化了加载性能。通过熟练掌握这一技术，你可以构建出功能强大且易于维护的单页应用。
vue3+element-plus+admin
最新发布
04-12
Vue3 + Element-Plus + Admin ...这个项目实例适合学习 Vue3 的最新特性、Element-Plus 的使用，以及如何在实际项目中实现用户权限管理。开发者可以通过研究这个项目，掌握前端开发的最佳实践，并应用于自己的项目中。
Vue页面手动刷新,实现导航栏激活项还原到初始状态
10-14
总之，Vue页面在手动刷新后，为了恢复导航栏的初始状态，我们需要在组件创建后获取当前路由并更新`defaultActiveIndex`的值，同时监听路由变化以应对动态导航。通过这种方式，无论页面是否被刷新，都能保持导航栏的...
element-ui 初次访问页面导航菜单默认高亮激活
Fabbom的博客
03-25 4949
element-ui 导航菜单默认激活 今天遇到一个和element-ui导航菜单有关的问题 那就是如何在初次访问页面时使某个导航菜单选项为激活状态 我这一进去就是首页页面，所以首页这个选项应该是高亮的 我的代码： html： <el-menu :default-active="activePath" :router="true" class="el-menu-vertical-demo...
element-plus中菜单组件属性 default-active
Fatfish_tree的博客
01-14 1532
但是在调试时 发现default-active默认激活菜单这个属性没有起作用----->无论是初次刷新还是选择某个菜单后刷新 都不会激活菜单 所有的菜单项是合上的状态。在使用时，陷入了一个误区 以为是绑定某个string类型的数字 但是这个绑定值是和菜单数据中所有子菜单的数据相关的 绑定的是子菜单中的唯一值。我这里绑定的是code.Name字段 所以default-active他的动态的数据应该是某个子菜单的名称才对。default-active绑定值是和这里的数据一一对应的。
vue3——element-plus 实现页面刷新之后，保持菜单的激活状态
wlijun_0808的博客
11-17 2736
vue3——element-plus 实现页面刷新之后，保持菜单的激活状态
【web系列十二】element plus的一些实用技巧
Nicholson的博客
07-21 6755
主要记录一下element-plus组件的一些实用技巧和注意事项，同时会提供对应的代码示例。
解决vue-router中页面刷新和路由改变时导航条不一致的问题
1281024的博客
05-10 927
1.当我们在使用路由时，如果有导航条此时，我们在url地址栏目改变路由地址，此时路由内容更改但，导航条样式没有随着改动。2.当页面刷新时，url导航地址栏的路由和当前页面显示的不一致。3.当在页面中跳转页面时，导航条样式不变。1.通过watch监听路由地址的改变。2.使用钩子函数，改变路由。
vue3动态路由刷新后失效
why_so_serious__的博客
08-03 729
添加动态路由后，能够访问该路由，但是刷新页面后，出现了匹配不到该路由的问题。
element-ui导航菜单跳转页面后，菜单选中项不对
qianduanVIP666的博客
08-03 940
2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）1. el-menu 标签添加属性 :default-active="$route.path"1. 菜单跳转后，页面菜单的选中项与实际不符。2. 当前页面刷新后，菜单选中项与实际不符。
elementUI-解决刷新页面路由地址和页面不跟随变化的问题
super码力的博客
08-17 2325
elementUI-解决刷新页面路由地址和页面不跟随变化的问题
vue3+element侧边栏导航循环遍历icon
06-07
在Vue3中使用Element UI实现侧边栏导航循环遍历icon的实现方法与上面所示的基本类似，只是需要使用Element UI提供的icon组件。以下是一个示例代码： ```html <template> <div> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu-item v-for="(item, index) in navItems" :key="index" :index="index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </el-menu> </div> </template> <script> export default { data() { return { activeIndex: "0", // 默认选中项的索引 navItems: [ { title: "Home", link: "/", icon: "el-icon-s-home" // Element UI提供的icon类名 }, { title: "About", link: "/about", icon: "el-icon-info" }, { title: "Contact", link: "/contact", icon: "el-icon-message" }, // 循环遍历的数据可以自行添加或从后端API获取 ] }; }, methods: { handleSelect(index) { this.activeIndex = index; } } }; </script> ``` 在上面的代码中，`navItems`数组中存储了侧边栏导航的数据，包括每个导航项的标题、链接和图标类名。使用`v-for`指令在模板中循环遍历这些导航项，并将每个图标的类名绑定到`<i>`元素的`class`属性上，以显示相应的图标。同时，使用Element UI提供的`el-menu`和`el-menu-item`组件实现了导航菜单的基本结构，并使用`default-active`属性指定默认选中项的索引。在`handleSelect`方法中，我们可以监听导航菜单的`select`事件，更新选中项的索引并执行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值