实现一个移动端的菜单，默认不显示，点击菜单键后才显示菜单列表，发现按下面的代码实现后路由不跳转了。

<template>
    <div id="header">
        <h1 class="name">肖奕钦</h1>
        <ul
            class="menu" 
            ref="menu" 
        >
            <router-link to="/" tag="li" class="menu-item">首页</router-link>
            <router-link to="/article" tag="li" class="menu-item">作品</router-link>
            <router-link to="/callMe" tag="li" class="menu-item">联系我</router-link>
        </ul>
        <span 
            class="iconfont" 
            @click="handleIconClick"
            tabindex="0"
            @blur="handleItemBlur"
        >&#xe62b;</span>
    </div>
</template>

<script>
export default {
    name: 'Memu',
    methods: {
        handleIconClick() {
            let menuDis = this.$refs.menu.style.display;
            this.$refs.menu.style.display = menuDis === "none" ? "inline-block" : "none";
        },
        handleItemBlur() {
            this.$refs.menu.style.display = "none";
        }
    }
}
</script>

是因为点击后执行了隐藏那一步，所以不跳转吗？
需要怎么改呢？