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


Posted in Javascript onNovember 12, 2019

用导航菜单时遇到的一些问题:点击打开官网例子

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

问题1:

页面强制刷新,按F5时,页面如果没有好好设置的话,导航栏默认叠起来,而且无高亮显示;刷新后导航栏显示和之前不一致,如图所示

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

解决:

html关键代码设置 :default-active="defaultUrl"

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

这儿的原理就是defaultUrl跟#/后面的一致,也就是说跟router.js中的path一致才行(router.js见后文)

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

window.location.href.split('/#')[1] 获取的是"http://localhost:8080/#/search-contact/1"中的"/search-contact/1"

这样设置后,无论如何刷新页面,页面都会高亮显示当前url

问题2:

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

点击浏览器前进后退按钮导致高亮显示不同步,

解决问题关键,和问题一原理一样,当路由变化时,改变默认显示高亮的值

//监听路由变化
  watch: {
   '$route':'getPath'
  },
  methods: {
   getPath(){
    this.defaultUrl = this.$route.path;
   }
  },

补充:

以上,div和js文件在设置菜单栏的menu.vue文件下。

router.js里面这样设置

import Vue from 'vue';
import Router from 'vue-router';
 
Vue.use(Router);
 
import Home from './views/home';
 
import SearchProperty from './views/search/search-property';
import SearchListing from './views/search/search-listing';
import SearchContact from './views/search/search-contact';
import SearchSchool from './views/search/search-school';
 
export default new Router({
 routes: [
  {name: 'home', path: '/', component: Home},
  {name: 'search-property', path: '/search-property/:pageNum', component: SearchProperty},
  {name: 'search-contact', path: '/search-contact/:pageNum', component: SearchContact},
  {name: 'search-listing', path: '/search-listing/:pageNum', component: SearchListing},
  {name: 'search-school', path: '/search-school/:pageNum', component: SearchSchool},
 
 ],
});

补充:这是目前发现最简单的一种方法

<el-menu router :default-active="$route.path">
</el-menu>

以上这篇vue+element导航栏高亮显示的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 #Javascript
Vue退出登录时清空缓存的实现
Nov 12 #Javascript
解决vue admin element noCache设置无效的问题
Nov 12 #Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 #Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 #Javascript
vue 中几种传值方法(3种)
Nov 12 #Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 #Javascript
You might like
PHP技术开发技巧分享
2010/03/23 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JavaScript类库D
2010/10/24 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
django自带的server 让外网主机访问方法
2018/05/14 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python 遍历pd.Series的index和value
2019/11/26 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
通过代码实例了解Python sys模块
2020/09/14 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
文秘专业自荐信
2013/10/14 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
品牌推广策划方案
2014/05/28 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang