fixed #3484

examples/routers/menu.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
+        <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="light" accordion @on-open-change="handleOpenChange">
             <Submenu name="1">
                 <template slot="title">
                     <Icon type="ios-analytics"></Icon>
@@ -20,8 +20,8 @@
                     <Icon type="ios-filing"></Icon>
                     Navigation Two
                 </template>
-                <MenuItem name="2-1">Option 5</MenuItem>
-                <MenuItem name="2-2">Option 6</MenuItem>
+                <MenuItem name="2-1" to="/button">Option 5</MenuItem>
+                <MenuItem name="2-2" to="//iviewui.com" target="_blank">Option 6</MenuItem>
                 <Submenu name="3">
                     <template slot="title">Submenu</template>
                     <MenuItem name="3-1">Option 7</MenuItem>

src/components/button/button.vue

@@ -107,14 +107,7 @@
             handleClickLink (event) {
                 this.$emit('click', event);
 
-                if (this.to) {
-                    if (this.target === '_blank') {
-                        return false;
-                    } else {
-                        event.preventDefault();
-                        this.handleClick();
-                    }
-                }
+                this.handleCheckClick(event);
             }
         },
         mounted () {

src/components/menu/menu-item.vue

@@ -1,15 +1,17 @@
 <template>
-    <li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li>
+    <a v-if="to" :href="linkUrl" :target="target" :class="classes" @click="handleClickItem" :style="itemStyle"><slot></slot></a>
+    <li v-else :class="classes" @click.stop="handleClickItem" :style="itemStyle"><slot></slot></li>
 </template>
 <script>
     import Emitter from '../../mixins/emitter';
-    import { findComponentUpward } from '../../utils/assist';
+    import { findComponentUpward, oneOf } from '../../utils/assist';
     const prefixCls = 'ivu-menu';
     import mixin from './mixin';
+    import mixinsLink from '../../mixins/link';
 
     export default {
         name: 'MenuItem',
-        mixins: [ Emitter, mixin ],
+        mixins: [ Emitter, mixin, mixinsLink ],
         props: {
             name: {
                 type: [String, Number],
@@ -18,6 +20,20 @@
             disabled: {
                 type: Boolean,
                 default: false
+            },
+            to: {
+                type: [Object, String]
+            },
+            replace: {
+                type: Boolean,
+                default: false
+            },
+            target: {
+                type: String,
+                validator (value) {
+                    return oneOf(value, ['_blank', '_self', '_parent', '_top']);
+                },
+                default: '_self'
             }
         },
         data () {
@@ -43,7 +59,7 @@
             }
         },
         methods: {
-            handleClick () {
+            handleClickItem (event) {
                 if (this.disabled) return;
 
                 let parent = findComponentUpward(this, 'Submenu');
@@ -53,6 +69,8 @@
                 } else {
                     this.dispatch('Menu', 'on-menu-item-select', this.name);
                 }
+
+                this.handleCheckClick(event);
             }
         },
         mounted () {

src/mixins/link.js

@@ -13,6 +13,16 @@ export default {
             } else {
                 window.location.href = this.to;
             }
+        },
+        handleCheckClick (event) {
+            if (this.to) {
+                if (this.target === '_blank') {
+                    return false;
+                } else {
+                    event.preventDefault();
+                    this.handleClick();
+                }
+            }
         }
     }
 };

src/styles/components/menu.less

@@ -66,6 +66,12 @@
         cursor: pointer;
         transition: all @transition-time @ease-in-out;
     }
+    a&-item{
+        color: inherit;
+        &:hover, &:active{
+            color: inherit;
+        }
+    }
     &-item > i{
         margin-right: 6px;
     }