Vue：如何保持导航栏的高亮状态

我们在利用Vue写后台管理系统时，对于导航栏我们需要保持其处于选择的高亮状态，大概要经过如下三个步骤：

为所需要的点击的二级菜单栏设置点击事件，把对应的index值保存在sessionStorage中
当页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活
点击每一个二级菜单栏时，要给activePath重新赋值

下面来看一下具体的实现过程：
1.为二级菜单栏绑定点击事件saveNavState

2.把对应的index值保存在sessionStorage中

saveNavState (activePath) {window.sessionStorage.setItem('activePath', activePath)this.activePath = activePath}

打开调试器可以看到点击菜单栏，保存了当前的index值

3.需要在页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活，所以我们直接在create函数中进行操作

created () {this.getMenuList()// 将sessionStorage中的值取出来赋值给菜单栏this.activePath = window.sessionStorage.getItem('activePath')},

4.为菜单栏组件 < el-menu > 动态绑定 :default-active=“activePath” 属性
5.在saveNavState函数中添加this.activePath = activePath，保证点击每一个二级菜单栏时，activePath都重新赋值

Vue：如何保持导航栏的高亮状态相关推荐

vue制作导航栏html,vue实现nav导航栏的方法
vue实现nav导航栏的方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue实现nav导航栏的方法,编程之家小编觉得挺不错的,现在分 ...
vue+elementui左侧导航栏
vue+elementui左侧导航栏踩坑最近接触前端vue+elementui,记录一下 1. element官网这里:default-active="***"前面没有冒号,直接 ...
vue制作导航栏html,Vue如何实现导航栏菜单的方法
Vue如何实现导航栏菜单的方法发布时间:2020-08-20 09:42:45 来源:亿速云阅读:235 作者:小新这篇文章将为大家详细讲解有关Vue如何实现导航栏菜单的方法,小编觉得挺实用的, ...
Vue项目设置导航栏高亮
Vue实现点击切换导航栏效果编译环境 Vue2.x 版本期待实现的效果图解决思路通过设置动态class的方式,通过点击传递此时所点击item的索引值,当索引值和所设置的初始值相等时,动态cla ...
vue底部导航栏（选中状态刷新不消失）解决
我们用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标是我自己找的,选中和未 ...
Vue实现侧边导航栏于Tab页关联
技术栈侧边栏用 Antd tab使用element 效果 <template><div class="main-card"><el-row>& ...
vue中点击导航栏部分，页面切换
写页面的时候都会用到一些导航栏.点击不同的部分切换不同的页面.并且点击的时候更换颜色代码自己简单的写一下:(vue) <nav> <ul><li v-for=" ...
vue vue-router ElementUI导航栏重复点菜单报错问题
在使用Element-UI中的导航时,默认情况下如果重复点击某选项,会报错. 可以在router的配置文件中(router -> index.js)加上下面这句话,注意位置: //router/ ...
Vue实现左边导航栏，右边显示对应内容
使用嵌套路由实现这里重点要注意使用<router-view></router-view> ,路由出口, 路由匹配到的组件将渲染在这里导航栏代码userInfo.vue: & ...

Vue：如何保持导航栏的高亮状态

Vue：如何保持导航栏的高亮状态相关推荐

最新文章

热门文章