在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 關(guān)于如何修改輸入路徑激活對應(yīng)的導(dǎo)航菜單項

關(guān)于如何修改輸入路徑激活對應(yīng)的導(dǎo)航菜單項

element-ui中NavMenu菜單的激活,可通過點擊該菜單項激活,激活菜單高亮顯示,然后跳轉(zhuǎn)到該頁面;也可直接輸入菜單項對應(yīng)path,也可以進入該頁面并激活頁面對應(yīng)的菜單項。

我現(xiàn)在遇到的問題是:用了Vue router的別名。路由b是a的別名,在匹配時雖然路徑不一樣,但是還是跳到了a路由下的界面,也就是雖然路徑不同但實際的頁面和名字是一樣的。

但是輸入別名路徑時,雖然跳到了該頁面,但那個菜單項卻沒有被激活

查看了element-ui的源碼,沒有找到路徑匹配菜單項的激活代碼,只看到了點擊部分的代碼。小弟初識Vue和elment-ui,還請各位大佬幫忙看一看,不勝感激!^_^

下面是菜單項的源碼menu-item.vue:

<template>
  <li class="el-menu-item"
    :style="[paddingStyle, itemStyle, { backgroundColor }]"
 //點擊激活事件
    @click="handleClick"                
    @mouseenter="onMouseEnter"
    @focus="onMouseEnter"
    @blur="onMouseLeave"
    @mouseleave="onMouseLeave"
    :class="{
      'is-active': active,
      'is-disabled': disabled
    }"
    role="menuitem"
    tabindex="-1"
  >
    <el-tooltip
      v-if="$parent === rootMenu && rootMenu.collapse"
      effect="dark"
      placement="right">
      <div slot="content"><slot name="title"></slot></div>
      <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
        <slot></slot>
      </div>
    </el-tooltip>
    <template v-else>
      <slot></slot>
      <slot name="title"></slot>
    </template>
  </li>
</template>
<script>
  import Menu from './menu-mixin';
  import ElTooltip from 'element-ui/packages/tooltip';
  import Emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: 'ElMenuItem',

    componentName: 'ElMenuItem',

    mixins: [Menu, Emitter],

    components: { ElTooltip },

    props: {
      index: {
        type: String,
        required: true
      },
      route: {
        type: [String, Object],
        required: false
      },
      disabled: {
        type: Boolean,
        required: false
      }
    },
    computed: {
      active() {
        return this.index === this.rootMenu.activeIndex;
      },
      hoverBackground() {
        return this.rootMenu.hoverBackground;
      },
      backgroundColor() {
        return this.rootMenu.backgroundColor || '';
      },
      activeTextColor() {
        return this.rootMenu.activeTextColor || '';
      },
      textColor() {
        return this.rootMenu.textColor || '';
      },
      mode() {
        return this.rootMenu.mode;
      },
      itemStyle() {
        const style = {
          color: this.active ? this.activeTextColor : this.textColor
        };
        if (this.mode === 'horizontal' && !this.isNested) {
          style.borderBottomColor = this.active
            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
            : 'transparent';
        }
        return style;
      },
      isNested() {
        return this.parentMenu !== this.rootMenu;
      }
    },
    methods: {
      onMouseEnter() {
        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
        this.$el.style.backgroundColor = this.hoverBackground;
      },
      onMouseLeave() {
        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
        this.$el.style.backgroundColor = this.backgroundColor;
      },
      handleClick() {
        this.dispatch('ElMenu', 'item-click', this);
        this.$emit('click', this);
      }
    },
    created() {
      this.parentMenu.addItem(this);
      this.rootMenu.addItem(this);
    },
    beforeDestroy() {
      this.parentMenu.removeItem(this);
      this.rootMenu.removeItem(this);
    }
  };
</script>

另外,今天又回過頭仔細看了一下。發(fā)現(xiàn)應(yīng)該是用不著修改源碼的,在菜單項部分,有defalut-active屬性,不過那里綁定的是:defalut-active="$route.path",試著修改為:defalut-active="$route.path||$route.name"還是沒有用呢。

圖片描述

![圖片描述

查看NavMenu中的屬性說明,defalut-active為當(dāng)前激活菜單的index
圖片描述

難道說是菜單項出index的設(shè)置只是path,于是去加上name屬性,可是還是沒有效果尼??
圖片描述

回答
編輯回答
神經(jīng)質(zhì)

自問自答^_^ 就在剛剛重新捋了一下思路,,順著上面修改的index。既然在index后加上了index的標(biāo)識,defalut-active也加上了name標(biāo)識還是不成功,最后試著單獨將:defalut-active改為name,index唯一標(biāo)識也改為僅僅由name標(biāo)識的試了一下。
圖片描述

圖片描述

最后,終于終于成功了?。?!但是我不知道為什么同時將 path和name作為標(biāo)識不成功?
圖片描述

2017年8月10日 10:31