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

element-ui + vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题1. element-ui 提供一个属性 :default-active='activeNav' 来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active 的值即可。下面是我写的配置文件/

littlebearGreat

8755人浏览 · 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>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^