鍍金池/ 問答/HTML/ vue點(diǎn)擊后路由沒有跳轉(zhuǎn)？

vue點(diǎn)擊后路由沒有跳轉(zhuǎn)？

實現(xiàn)一個移動端的菜單，默認(rèn)不顯示，點(diǎn)擊菜單鍵后才顯示菜單列表，發(fā)現(xiàn)按下面的代碼實現(xiàn)后路由不跳轉(zhuǎn)了。

<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">聯(lián)系我</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>

是因為點(diǎn)擊后執(zhí)行了隱藏那一步，所以不跳轉(zhuǎn)嗎？
需要怎么改呢？

回答
編輯回答
陪妳哭

router-link會被渲染成a標(biāo)簽，所以它才能跳轉(zhuǎn)，你用tag把它變成li了

2018年9月19日 06:27
編輯回答
傻叼

你在使用vue，為什么不用v-show控制? 跳出DOM
另外你span標(biāo)簽綁定失去焦點(diǎn)事件可行嗎？問題就出在這里

 
<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">聯(lián)系我</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>
2017年7月22日 13:05
編輯回答
鐧簞噯

你的路由是怎么寫的？

例如：

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

使用時：

<router-link :to="{name:'callMe'}"></router-link>
2017年11月17日 10:03