vue点击后路由没有跳转？

Question

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

<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>

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

Answer 1

router-link会被渲染成a标签，所以它才能跳转，你用tag把它变成li了

Answer 2

你在使用vue，为什么不用v-show控制? 跳出DOM
另外你span标签绑定失去焦点事件可行吗？问题就出在这里

 
<template>
    <div id="header"  @click="handleItemBlur">
        <h1 class="name">肖奕钦</h1>
       <ul class="menu"   v-show="showMenu">
            <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.stop="handleIconClick"
            tabindex="0"
            
        >&#xe62b;</span>
    </div>
</template>

<script>
export default {
    name: 'Memu',
       data (){
            return {
            showMenu:false,
            }
        },
    methods: {
        handleIconClick() {
            this.showMenu=!this.showMenu
          },
       handleItemBlur() {
            this.showMenu=false
          }
    }
}
</script>
 

Answer 3

你的路由是怎么写的？

例如：

{
          path: "callMe",
          name: "callMe",
          component: resolve =>
            require(["@/views/callMe.vue"], resolve)
        }

使用时：

<router-link :to="{name:'callMe'}"></router-link>