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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
JavaScript undefined及null区别实例解析
Jul 21 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 APC配置文件2套和参数详解
2014/06/11 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[17:36]VG战队纪录片
2014/08/21 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python如何调用java类
2020/07/05 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
大学四年规划书范文
2013/12/27 职场文书
关于爱情的广播稿
2014/01/16 职场文书
打造完美自荐信
2014/01/24 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
涨价通知怎么写
2015/04/23 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis