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 相关文章推荐
Jquery解析json数据详解
Dec 26 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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中的超全局变量
2006/10/09 PHP
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
prototype 的说明 js类
2006/09/07 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
nodejs基础应用
2017/02/03 NodeJs
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
django 邮件发送模块smtp使用详解
2019/07/22 Python
python add_argument()用法解析
2020/01/29 Python
python中os.remove()用法及注意事项
2021/01/31 Python
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
护士在校生自荐信
2014/02/01 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
新教师培训方案
2014/06/08 职场文书
小学生暑假安全公约
2015/07/14 职场文书
2019各种承诺书范文
2019/06/24 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL