elementui导航栏刷新选中问题

获取地址栏中的路由,设置elementui中的导航栏选中状态

<el-menu
              :default-active="activerouter"
              class="el-menu-vertical-demo"
              background-color="#13141f"
              text-color="#fff"
              active-text-color="#fff"
              router
              style="height:100%"
            >

data

activerouter: ""
mounted() {
    // 页面手动刷新指定路由
    //获取地址栏中的路由,设置elementui中的导航栏选中状态
    let defaultMenu = window.location.hash.substr(
      window.location.hash.indexOf("/")
    );
    this.activerouter = defaultMenu;
  }

在mounted中添加以上代码,这样在渲染之前先把当前的路由设置给导航栏的默认的路由,则刷新也是显示的当前路由的内容,并且导航栏高亮的也是当前路由的那个选项了

原文地址:https://www.cnblogs.com/home-/p/12198059.html

时间: 2024-10-10 03:52:28

elementui导航栏刷新选中问题的相关文章

Jquery给当前页或者跳转后页面的导航栏添加选中后样式

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript" src="templets/js/jquery.js"></script>  <script type=&qu

利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式

当鼠标选中页面导航栏的某一栏目后,如何给选中栏目添加特殊样式,一直没怎么搞清楚,今天学习了一下,并做个总结. 这边有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script>   $(document).ready(function(){       $(".nav a").each(function(){           $(this).click(func

vue 导航栏刷新页面定位:

不想分析可以直接看解决方案 问题描述: 通过router的route-link可以实现导航栏的功能,并且可以跳转到相应页面 但是刷新页面导航栏没有定位到当前页面一栏. 问题分析: 定位导航栏步骤 1. 点击导航栏对当前一栏添加class <a @click="toPath(item.note)" :class="{ 'active': item.note === data.currentPath }"> {{item.name }} </a>

给当前页或者跳转后页面的导航栏添加选中样式

$("ul.nav-list li a").each(function () { //$("ul.nav-list li").removeClass("active"); if ($($(this))[0].href == String(window.location)) if ($(this).parent().find("li").length == 0) { $(this).parent().addClass("

elementUI 导航栏点击之后改变背景色,背景色悬停

一开始设置的是: .menuLeft .el-menu-item:hover{ background: #6db6ff !important; } .menuLeft .el-submenu__title:hover { background: #6db6ff !important; } 但它只是hover事件,并不会使背景色悬停,一直存在.后来又设置了: .menuLeft .el-menu-item.is-active { background: #6db6ff !important; }

elementUI的导航栏在刷新页面的时候选中状态消失的解决

首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { background-color: #00b4aa !important; } 在使用elementUI构建vue项目的时候会遇到页面刷新的时候子路由会保持原来的,页面中的内容也是当前对应路由的内容,但是elementUI的导航栏中的高亮显示的却失去了原来的状态,以下是我解决这个内容的方法,暂时没有发现什么

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

需求:比如有一个二级或三四级的菜单栏,页面不跳转时实现高亮显示是很容易的,网上有很多这样的素材.但是页面一跳转,新页面可就记不住你在上一个页面点击的位置了,也就不可能高亮显示.并且很多时候,跳转后的页面菜单栏是后台动态生成的,也就是菜单栏栏目不固定,那么就不可能给菜单栏高亮效果写死.不知道这个事利用前后台交互去做会不会容易点,但是现在是要用纯前台实现. 实现原理一:这时候必须找个地方给它把点击的位置存起来,等页面跳转后,从那个地方把标记取出来,再给导航相应的位置做高亮处理就好了. 方法1:利用

选中Tab控件单击事件,点击tab头,定位到导航栏的选项,为选中状态 ,DevExpress.XtraNavBar.NavBarControl 导航控件定位或选中状态 另导航的选项为选中状态.

/// <summary> /// 选中Tab控件单击事件,点击tab头,定位到导航栏的选项,为选中状态 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void xtraTabControl1_Click(object sender, EventArgs e) { Xtr

jquerymobile底部导航栏选中状态

jquerymobile底部导航栏: <div data-role="navbar"><ul>...</ul></div> 若要实现底部选中样式必须在当前页面a标签上加上: ui-btn-active ui-state-persist 这两个样式.