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 tips提示框组件实现代码
Nov 19 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
JavaScript中的Proxy对象
Nov 27 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
Python的另外几种语言实现
2015/01/29 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
历史专业个人求职信分享
2013/12/20 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
环保公益策划方案
2014/08/15 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
MySQL 视图(View)原理解析
2021/05/19 MySQL
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python