解决element-ui侧边导航在页面刷新后失去高亮的问题

element

A Vue.js 2.0 UI Toolkit for Web

项目地址：https://gitcode.com/gh_mirrors/eleme/element

免费下载资源

littlebearGreat

8840人浏览 · 2018-07-06 15:08:09

littlebearGreat · 2018-07-06 15:08:09 发布

element-ui + vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题

1. element-ui 提供一个属性

 :default-active='activeNav'

来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题

2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active 的值即可。

下面是我写的配置文件

  // 路由地址对应左侧导航的index
 
  let navConfig = {
 
  'index' : '0',
 
  'shell_manage' : '1',
 
  'job_execution' : '2-0',
 
  'periodic_task' : '2-1',
 
  'job_query' : '2-2',
 
  'approve_manage' : '3',
 
  'module_manage' : '4',
 
  'user_new' : '5-0',
 
  'page_new' : '5-1',
 
  'role_new' : '5-2'
 
  };
 
  function getActiveNav(href) {
 
  let key = href.split('/root/')[1];
 
  return navConfig[key];
 
  };
 
  export default getActiveNav;

下面是在导航页面获取并设置 default-active 的方法

  <template>
 
      <div id="left-nav"> 
 
          <!-- 导航菜单 -->
 
          <el-menu :default-active='activeNav'>
 
          </el-menu>
 
      </div>
 
  </template>
 
  <script>
 
  import getActiveNav from '../../../assets/utils/leftNavConfig';
 
  export default {
 
      name: 'navArea',    //导航区域
 
      data(){
 
          return {
 
              activeNav: '0'  /* 左侧菜单高亮项 */
 
          }
 
      },
 
      mounted() {
 
          this.activeNav = getActiveNav(window.location.href);
 
      },
 
      methods: {}
 
  }
 
  </script>

GitHub 加速计划 / eleme / element

下载

A Vue.js 2.0 UI Toolkit for Web

最近提交(Master分支：2 个月前 )

c345bb45 1 年前

a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐