zoukankan      html  css  js  c++  java
  • elementUI的导航栏在刷新页面的时候选中状态消失的解决

    首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色

    .el-menu-item.is-active {
      background-color: #00b4aa !important;
    }

    在使用elementUI构建vue项目的时候会遇到页面刷新的时候子路由会保持原来的,页面中的内容也是当前对应路由的内容,但是elementUI的导航栏中的高亮显示的却失去了原来的状态,以下是我解决这个内容的方法,暂时没有发现什么问题,如果大家有什么问题可以提出来

    <el-menu
          :default-active="activerouter"
          :router="true"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#00b4aa"
          @select="handleOpen"
          active-text-color="#fff"
        >

    首先在elementUI的导航栏的标签中设置

    :default-active="activerouter"
    其中activerouter是一个data中的变量,
     mounted() {
        //获取地址栏中的路由,设置elementui中的导航栏选中状态
        this.activerouter = window.location.pathname;
      },

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

  • 相关阅读:
    ORA-65114
    Mariadb 10.14 mysqldump error: 1049
    nginx:403 forbidden
    ORA-01017
    oracle 12C 之 Clone 数据库
    Selinux的基本使用
    This system is not registered to Red Hat Subscription Management
    Emacs: too long for unix domain socket
    hive 之 元数据表结构(Mysql)
    hive之SerDe
  • 原文地址:https://www.cnblogs.com/wyongz/p/11193013.html
Copyright © 2011-2022 走看看